Angular CLI 1.7.0 and Visual Studio Code - can't set breakpoints

Question

I'm using the Chrome Debugger plugin in Visual Studio Code to debug an Angular application. After upgrading to use angular/[email protected], we can no longer hit breakpoints in the typescript code within VS Code while debugging. If we roll back to angular/[email protected], breakpoints start working again.

Here's my ng -v output:

Angular CLI: 1.7.0
Node: 9.2.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

Is anyone else experiencing this?

Answer 1

For those coming across this the fix is to modify your launch.json sourceMapPathOverrides as follows:

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*" 
}

This fixed it for me with the latest @angular/cli (version 1.7.3).

Answer was found here.

Answer 2

Angular CLI 7.2.2:

Webstorm/Intellij - breakpoints never hit, VSCode - breakpoints unverified/never hit, Chrome debugger - breakpoints hit perfectly.

Solution: in angular.json set evalSourceMap to "false".

This triggers the Webpack that Angular CLI uses under the hood to generate source maps to original source code ("source-map") instead of generated code ("eval"). https://webpack.js.org/configuration/devtool

See under node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js

You can of course hack the browser.js file to set some other value for devtool.