I am building a site using Visual Studio and WebCompiler is enabled.
When I compile on build my path files are changing to:
../../img/icons-#2x.png
rather than what the expected outcome is:
../img/icons-#2x.png
This is my current compilerconfig.json file:
[
{
"outputFile": "dist/css/style.css",
"inputFile": "styles/style.scss",
"sourceMap": false,
"relativeUrls": false
}
]
I've racked my brains/googled for hours but cannot figure out what is causing this to happen?
Just to note I resolved this issue by including the following in my compilerconfig.json:
"options": {
"sourceMap": false,
"relativeUrls": false
}
Related
Is it possible to compile all .scss files residing in a folder using web compiler in Visual Studio 2019?
I don't want to specify each and every file. I tried something like this.
[
{
"outputFile": "wwwroot/assets/css/pages/",
"inputFile": "wwwroot/assets/sass/pages/**/*.scss",
"minify": { "enabled": true },
"includeInProject": true,
"options": { "sourceMap": true }
}
]
I am using Visual Studio 2017 for my Typescript project. I tried using Webpack to create a bundle for the source files. The source map produced by Webpack contains the source file urls in this format: "webpack:///./Main/SomeFile.ts". This causes Chrome Dev Tools to display webpack as a separate domain in the "Sources" tab. And when expanded, I can see the source ts files and successfully set breakpoints. But the problem is that I cannot debug using VS 2017 since the breakpoints I set in the IDE do not work.
As a work-around, I manually replaced all these "webpack:///." parts in the source map file by "../" which now points to the correct paths of the source files relative to the bundle file. And now VS picks up the breakpoints and I can debug inside VS.
My questions are:
What is the meaning of "webpack:///" and why is it being produced instead of relative paths?
Why doesn't VS 2017 pick up these and work out-of-the-box? And what is the proper solution as opposed to the work-around I tried above?
If there is no other solution than the work-around I mentioned, how can I integrate it to the webpack processing pipeline so that I don't have to do it manually every time?
Here are my configs:
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
devtool: "source-map",
entry: {
app: './Components/MainComponent/MainComponent.ts'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
},
module: {
rules: [
{ test: /.css$/, use: 'css-loader' },
{ test: /.ts$/, use: 'ts-loader' },
//{ test: /.ts$/, use: 'awesome-typescript-loader' },
//{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
resolve: {
extensions: ['.ts', '.js', '.json']
}
}
tsconfig.json
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "./dist/",
"allowJs": true,
"module": "amd",
"alwaysStrict": true
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": true
}
Add this to your webpack.config.js, inside module.exports:
devtool: false,
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: "[file].map",
fallbackModuleFilenameTemplate: '[absolute-resource-path]',
moduleFilenameTemplate: '[absolute-resource-path]'
})
]
This will make breakpoints work in Visual Studio 2017.
Following Protractor guide I wanted to create my first test. While the test works unfortunately JetBrains WebStorm does not recognize all of my variables in given test
I have enabled in Libraries/JavaScript:
jasmine
karma
karma-jasmine
HTML
Node.js Core
selenium-webdriver
As seen above Node.js Core library is enabled.
I have also visited this question but unfortunately the angular-protractor is no longer available.
What am I missing?
Your editor will understand it if its imported. Elese it will know where to find browser ot by
Add import statement at top of your file.
import {by, element} from 'protractor';
Use JS Hint RC. It will work like magic.
You can find this by going to
Settings -> Languages and Frameworks -> Javascript(select ECMA Script 6) ->Code Quality Tools- >JS Hint - Enable, use config file.
As for config file, save the bellow file, with following name: '.jshintrc'.
Rate the answer as positive if this worked for you!
{
"jasmine": true,
"mocha": true,
"esversion":6,
"loopfunc": true,
"node": true,
"globals": {
"esversion": 6,
"angular": false,
"browser": false,
"inject": false,
"_": false,
"driver": false,
"protractor": false,
"$": false,
"$$": false,
"element": false,
"by": false,
"list": false
}
}
Everything about TS 2.x #types seems so awesome, but I cannot for the life of me figure out how to get it working correctly!
I have Visual Studio 2015 installed - version 14.0.25431.01 Update 3
I have TypeScript 2.1.4 for Visual Studio 2015 installed, which I got from here
The VS Web project has been set to use TypeScript 2.1 with <TypeScriptToolsVersion>2.1</TypeScriptToolsVersion>
Here's a relevant portion from my packages.json file
"dependencies": {
"angular": "^1.5.9",
"angular-messages": "^1.5.9",
"angular-ui-bootstrap": "^2.3.0",
"angular-ui-router": "^0.3.2",
"moment": "^2.17.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"#types/angular": "^1.5.21",
"#types/angular-ui-bootstrap": "^0.13.36",
"#types/angular-ui-router": "^1.1.35",
"#types/jquery": "^2.0.34",
"#types/node": "^0.0.3",
"#types/signalr": "^2.2.32",
"#types/underscore": "^1.7.36"
}
And here's my full tsconfig.json file
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"sourceMap": true,
"target": "ES5"
},
"typeAcquisition": {
"enable": true
}
}
I've also tried variations with typeRoots and types specified (one, the other, both, neither) inside the compilerOptions, but no luck!
"typeRoots": [
"./node_modules/#types"
],
"types": [
"angular",
"angular-ui-bootstrap",
"angular-ui-router",
"jquery",
"moment",
"signalr",
"underscore"
]
I've cleaned the build, restarted Visual Studio, etc. but no matter what I do I just get build errors like
some-file.ts(8,22): error TS2304: Build:Cannot find name 'angular'.
some-file.ts(12,41): error TS2694: Build:Namespace 'angular' has no exported member 'IScope'.
some-file.ts(12,67): error TS2694: Build:Namespace 'angular' has no exported member 'IRootElementService'.
another-file.ts(26,22): error TS2503: Build:Cannot find namespace 'moment'.
another-file.ts(47,37): error TS2304: Build:Cannot find name 'moment'.
All of the typedefs exist on disk in either node_modules/#types or with the relevant package itself. I have no idea why Visual Studio/TypeScript cannot find these files! I feel like something was either not ready to be released yet, or I'm missing something extremely simple. Please someone point me in the right direction here
If you haven't got this resolved yet try uninstalling the typescript tools from uninstall/install programs (you may have multiple versions like I did) and reinstalling the typescript tools # v2.1.4 via the install package you already have. Double check in visual studio that, that is the version you are using (it should have the details in 'about microsoft visual studio' in the help menu)
Here's my tsconfig in case that helps:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [
"node_modules/#types"
]
},
"typeAcquisition": {
"enable": true
},
"exclude": [
"jspm_packages"
]
}
This works for any types that export a module but I have still had issues when importing individual typings when they aren't modules (ie just interfaces etc)...
Generally I haven't had to do any import * from x statements for libraries and have been able to just use the name of the module exported directly.
I have a TypeScript project in Visual Studio, with modules installed via systemjs. I have the following code:
app.ts
import { Aurelia } from 'aurelia-framework';
For example, hovering Aurelia and pressing F12 (Go to Definition) opens up the correct aurelia-framework.d.ts file installed by systemjs. However, when I click Build, I get the following output:
error TS2307: Build: Cannot find module 'aurelia-router'.
Here is my tsconfig for reference.
tsconfig.json
{
"version": "1.8.0",
"compilerOptions": {
"rootDir": "src/",
"outDir": "dist/",
"target": "es5",
"module": "system",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
The answer appears to be to add a file - I call mine typings.d.ts - in the root of your aurelia app - /src or whatever you've called it - with a single /// reference to the index.d.ts file in your typings folder.
Then everything plays nice.