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/cli@1.7.0, we can no longer hit breakpoints in the typescript code within VS Code while debugging. If we roll back to angular/cli@1.6.7, 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?

There is an open issue, see https://github.com/angular/angular-cli/issues/9729 — Soundlink, Feb 27 '18 at 17:15

score 12 · Answer 1 · answered Mar 16 '18 at 07:15

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.

Liebster Kamerad · Answer 2 · 2019-03-29T10:09:38.077

7

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.

edited Mar 29 '19 at 10:09

answered Feb 26 '19 at 10:44

Liebster Kamerad

6,179
2
19
18

Would you mind explaining a little further about how to hack the browser.js? I am trying to get debugging working in WebStorm but break points are not being hit. – webworm May 03 '19 at 18:13
@webworm Also with evalSourceMap=false in angular.json (in some versions angular-cli.json)? Then you have to find browser.js in your Angular CLI installation (for Angular CLI 7.2.2 it was: node_modules\angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js) and check how devtool/sourcemap is being set there. I just changed "eval" to "source-map" in the example above before I've found out where the buildOptions come from. – Liebster Kamerad May 07 '19 at 08:27
3

@angular/cli 10.2, `evalSourceMap` is not an allowed property – brt Jul 28 '21 at 15:49

Simon Snowlock · Answer 3 · 2018-02-22T05:25:25.457

Yes, same thing here.

Sometimes I can reach the breakpoint I want with some difficulty (the issue seems to be with the sourcemap, but the debugger is still functional).

I tried fiddling with some settings in the VS-Code debugger launch configuration ("sourceMaps" and "trace"), but to no avail.

Eventually I rolled back @angular/cli to 1.6.8 and it works fine again.

Edit: Forgot to mention, in case it helps someone searching for this issue - when starting debugging, the breakpoints disappear from the source file and its tab is marked with "read-only inlined content from source map".

Also, @angular/cli 1.7.1 does not resolve this.

score 1 · Answer 4 · answered Feb 27 '18 at 10:16

1

Same here, rolled back to 1.6.8 (and angular 5.1.1) to get my breakpoints working again.

answered Feb 27 '18 at 10:16

MIP1983

1,354
1
15
25

score 1 · Answer 5 · answered Apr 25 '18 at 12:36

Setting sourceMapPathOverrides was not sufficient.

In my case the index.html file is located in "/src", and Angular components in "/src/app". I use @angular/cli 1.7.4, vscode 1.22.2 and chrome debugger 4.3.0.

I had to set three parameters in the launch.json.

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*"
},
"webRoot": "${workspaceFolder}",
"sourceMaps": true,

sourceMaps is optional but make sure it is not set to false.

It must be set for each configuration of the launch.json config file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome DEBUG 172.22.44.49",
            ...

In the chrome debugger sourcemaps documention, It is said to set webRoot to the directory that files are served from. But to solve this issue I had to set it to the workspace root directory.

score 1 · Answer 6 · answered Nov 05 '19 at 18:14

If you are using a WorkSpace with 1 or more Projects..

Working for me: launch.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "ng serve",
        "url": "http://localhost:4300",
        "webRoot": "${workspaceFolder}/ProjectName",
        "sourceMapPathOverrides": { 
            "webpack:/*": "${webRoot}/*" 
        }
    }
]

1- Start Project ng serve --port 4300

2- Start Debugging

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

6 Answers6

Linked