Angular-cli: Sourcemaps generated by all versions >= 1.7.0-beta.2 do not work in the VS Code Chrome/Firefox Debuggers

[mhendlich]

Versions

Angular CLI: 1.7.1
Node: 9.5.0
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Other:
Yarn 1.3.2
Win 10 Professional x64
Chrome x64 64.0.3282.167
VS Code 1.20.1 x64
VS Code - Debugger for Chrome 4.1.0
VS Code - Debugger for Firefox 1.1.0

Repro steps

• ng new
• Add some test code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClicked()">TEST</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  onClicked() {
    console.log('test');
  }
}

• ng serve
• Start debugging using this config:

{
   "name": "Launch Chrome against localhost, with sourcemaps",
   "type": "chrome",
   "request": "launch",
   "url": "http://localhost:4200/",
   "runtimeArgs": [
     "--user-data-dir",
     "--remote-debugging-port=9222"
   ],
   "sourceMaps": true,
   "webRoot": "${workspaceRoot}"
 }

• Set a breakpoint on the button click handler
• Click button

Observed behavior

Nothing happens.
After refreshing the page in chrome, breakpoints sometimes get hit, but VS Code shows them on the wrong line.
Using the Firefox debugger yields the same results.

Desired behavior

The breakpoint gets hit in VS Code.

Mention any other details that might be useful (optional)

Recent versions <= 1.7.0-beta.1 work as expected
All versions >= 1.7.0-beta.2 do not work (latest checked: v6.0.0-beta.5 / v1.7.3)

We use the same tools on all of our development machines. The observed behavior is the same on every one.

Breakpoints work as expected when set in the webpack sources using chrome dev tools.

Removing the runtimeArgs or webRoot entries from the launch config doesn't help.

Someone posted a similar issue on the VSCode Chrome Debugger repo here.

Workaround

Using

debugger;

works, see this comment.

[satlom]

I can confirm that this happens with my project too. I have tried both 1.7.0 and 1.7.1 of the CLI and both get mixed up break point in VS Code. After downgrade to 1.6.8 everything works as expected.

[mkappl]

I too can confirm the issue. Starting with 1.7.0 breakpoints gets mixed up. Downgrading fixed the problem.

[MarkusFeldmann]

Yeah, here too. Had a hard night pinning it to angular/cli.

[AdxWojX231]

Have the same issue.

[cuberoot21]

The same for me: VS Code breakpoints get placed 4 rows lower than the line I've chosen.
Anyway VSCode stops at breakpoints but in read-only tabs only.
Downgrading CLI resolved the issue

[norbertK]

Same here - back to 1.6.8 works

[davidpolo]

Also with version 1.7.2 doesn't work
Confirmed: version 1.6.8 works

[benjamin-wilson]

VS Code:
Typescript 2.6.2
1.7.0, 1.7.1, 1.7.2 doesn't work
1.6.8 does.

[kdubious]

https://github.com/Microsoft/vscode-recipes/issues/81
I'll link that back here.

[satlom]

This is still a issue!

• Installed VS Code 1.21.0 x64.
• latest angular/cli 1.7.3.
• Created a new project with "ng new testcli".
• Set a breakpoint in app.component.ts on title = "app";
• Create a launch.json to use Chrome debugging and change port to 4200.
• ng serve
• F5 to start debugging anf launch Chrome

This is not working! Breakpoint changes to the top of the file.

[fberlin]

Same problem here...

[F0rt1s]

Same here, sourcemaps are broken in current versions.
Fix: If you use

debugger;

in your typescript code instead if setting a breakpoint, it works, even with sourcemaps and all.

[5c0r]

So before 1.7.0-beta.1 , generated sourcemap has full path as root directory

After 1.7.0, generated sourcemap now returns root directory as .

This can be found by accessing Sources tab from Chrome Developer Tools.

[mjolka]

@satlom I was able to get debugging working by adding the following source map path override to my configuration in .vscode/launch.json:

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

You can clone https://github.com/mjolka/angular-cli-issue-9729 and then

• Ctrl + Shift + B
• Set a breakpoint in src/app/app.component.ts:9
• Hit F5
• Refresh the page and the breakpoint should be hit

[satlom]

Great find mjolka!
I have tried this settings, and it worked with the latest Angular-CLI 1.7.3 and VS Code 1.21.0.
Big thank!!

[benjamin-wilson]

Worked for me!

[sjml]

While the fix @mjolka describes works for the basic functionality of hitting the breakpoint initially, there are still some pretty substantial issues.

1. Stepping through even sequential code, the "current statement" will fly around the file erratically. I expect some level of unpredictability with async code, but this happens even with synchronous code. My solution thus far has been to put a breakpoint on every line temporarily.
2. When errors are thrown at runtime, the line number given in the console isn't correct, so there's a lot of hunting and guesswork involved trying to find out what is breaking and where.
3. Phantom breakpoints have gotten a lot worse in the latest builds, where VS Code keeps stopping on code that doesn't have a breakpoint anymore. The only solution is to shut down and restart the debugging session.

I'm not sure to what extent some of this is VS Code's fault and what of it is Angular's fault, but given that it seemed to start in with 1.7, I'm thinking there's more coming from Angular than from VS Code.

[famu1hundred]

Looked for days for this fix. Works on MacOS, VSCode 1.21.1, Angular CLI 1.7.3

[nanoTitan]

Just changing workspaceRoot to workspaceFolder did not work for me. I had to use mjolka's solution and also add:

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

[5c0r]

I was somehow able to make this works:

So my use case is that I have a C# project and an Angular project ( Angular project bundled in wwwroot/dist , source is in angularProject )

{
            "name": "Attach to Chrome, localhost, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            // Where the file are bundled, but should work with ng serve as well , as long as you provided the right bundled path
            "webRoot": "${workspaceFolder}/src/DotnetProject/wwwroot/dist",
            "trace": true,
            "sourceMapPathOverrides": {
               // The path to my source code
                "webpack:///./angularProject/*": "${workspaceFolder}/src/DotnetProject/angularProject/*",
            }
        }

One good thing to also check the path of the debugging item and the path of your workspaceFolder

where previously mine was overrides to:
C:/Projects/ProjectA/src/DotnetProject/webapp/webapp/ErrorHandler.ts
which should be
C:/Projects/ProjectA/src/DotnetProject/webapp/ErrorHandler.ts

[JohnGalt1717]

Using the latest JavaScriptServices with /ClientApp being the root of the angular source I still can't get this working properly. Any suggestions?

[blopez2010]

I have this issue too and what I did to fix it is:

1. install global angular cli 1.6.8 version with: npm install -g @angular/[email protected]
2. run the project with ng serve so it will take the global installed version instead of the one used by the project.

I really hope someone fix this issue soon.

Some logging I took.

Using angular/cli latest version:
webpack:/src/store/treatment-groups-store.ts (/Users/user/Documents/projects/projectname/src/store/webpack:/src/store/treatment-groups-store.ts)

Using angular/[email protected]
webpack:/src/store/treatment-groups-store.ts (../../src/store/treatment-groups-store.ts)

Please note the differences between paths, this was taken running .scripts in vscode DEBUG CONSOLE

I have applied many of the comments listed below with no luck.

UPDATE

After some more research this should work with latest cli versions (mine is 1.7.2):

{
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/./*": "${webRoot}/*",
        "webpack:/src/*": "${webRoot}/src/*",
        "webpack:/*": "*",
        "webpack:/./~/*": "${webRoot}/node_modules/*"
      }
}

[lucasselliach]

@blopez2010 it's working very well, thank you.

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.9

[ghiscoding]

I have been following this thread since it was also broken on my side and I thought that the latest change from @blopez2010 was working since I was able to hit breakpoints but then I realized that it was hitting indeed but I couldn't get the variables values, so I was just about to revert to 1.6.8 yet again...

...but wait, I found the best solution which is a lot simpler than all other provided in this thread, and it works (hopefully for everyone this time) :)

You really need 2 changes from the original code

1. change the webRoot to "webRoot": "${workspaceFolder}/src" (or your source folder containing the files)
2. add sourceMapPathOverrides with 1 line in it.

Here's my final result

{
      "name": "Chrome Debugger",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
      }
    },

in my case, I don't have /src but another folder name and so my webRoot (if my folder is named "mySource") is actually something along

"webRoot": "${workspaceFolder}/mySource",

So just use src or the name of your folder containing, well your source files. You may also want to add the userDataDir but that is totally optional, if so use something along this "userDataDir": "${workspaceFolder}/.chrome",

And voilà!
I finally have breakpoints working and ready for Angular 6.x :)

How did I get the map path override? Simple, start the debugger in VSCode and in the "Debug Console" terminal window, type .scripts and see what path you need for updating the sourceMapPathOverrides

[blopez2010]

Actually with new VSCode version 1.23.0 everything back to normal with just

{
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "sourceMaps": true
    }

I don't like magic but... it is working now.

[kdubious]

@ghiscoding: Fails for me. I even closed and reopened VSCode. (Using VSCode 1.23.0)

@blopez2010: Yours mostly works. But, in this example:

getList(): void {
    this.loading = true;
    this.service.getAll("parentId", this.parentId ? this.parentId.toString() : null).then(data => {
        this.list = data;
        this.processList();
    });
}

With a breakpoint on LINE 5 (this.processList();), this.list on LINE 4 is undefined. So is this on LINE 4.

Is that expected?

[AbakumovAlexandr]

@kdubious , have you checked whether it's undefined in Chrome DevTools Debugger as well? Sometimes Chrome Debugger is unable to properly resolve sourcemapped this to _this in closures in generated JS. You can easily check it by temporary disabling Sourcemaps in Chrome.

If it's undefined there as well, then it's not the issue with VS Code.

[blopez2010]

As @AbakumovAlexandr says @kdubious, this within then promise is in a different scope than higher one, because of that you see it as undefined and this isn't an error since in Chrome DevTools happens in same way, actually with new feature, adding Log Message on breakpoints, you could see the value that is being set to this.list or creating a temporary variable to set this.list before its assignment.

[filipesilva]

Heya, I tried testing this today using Angular CLI 6.0.5.

These were the steps I took:

• Installed VS Code Chrome Debuggers, restarted VS Code.
• Replaced the contents of src/app/app.component.ts with:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onClicked()">TEST</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  onClicked() {
    console.log('test');
  }
}

• Started the dev server via ng serve.
• Opened the debug tab of VS Code, clicked the DEBUG dropdown, clicked Add Configuration.
• Used the default configuration but changed the port from 8080 to 4200:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

• Clicked the green play button, Chrome opens.
• Clicked the big TEST button in the Angular app, debugger is not triggered.
• Clicked F12 for the developer tools, go to Sources tab.
• Opened webpack://./src/app/app.component.ts and added a breakpoint to line 14 (console.log('test'); by clicking on the line number.
• Clicked the big TEST button in the Angular app. The breakpoint was hit. It looks like breakpoints defined inside Chrome work.
• Removed the breakpoint inside Chrome.
• Opened src/app/app.component.ts inside VS code and added a breakpoint to line 14 by clicking on the line.
• Clicked the big TEST button in the Angular app. The breakpoint was hit. It looks like breakpoints defined inside VSCode work.
• Removed the breakpoint inside Chrome.
• Added a debugger; statement in line 14.
• Clicked the big TEST button in the Angular app. The breakpoint was hit. It looks like breakpoints defined via debugger; statements work.

It looks like right now all of these work with the default configuration provided by the Chrome debugger in VS Code.

I am not sure what changed, or why they did not work before, but it seems ok now.

[filipesilva]

Actually, I have an idea of what might have changed. At some point we used eval-source-map which adds sourcemaps into the JS code directly, and evaluates them using eval. This makes rebuilds faster.

I don't think we're using them anymore. Maybe that was why.

[agalazis]

same issue on 6.0.5 not sure if the chrome tool

[gabyx]

yes, same issue with Chrome Debugger 4.9 VS Code Extension.
and angular cli 6.1.4

[dangoldstein]

Hi,
We are having a very similar problem. I posted a description of it here.
Would appreciate you taking a look at it.
Thanks,
Dan

[whizkidwwe1217]

Hi, I'm also having issues in debugging. The debugger doesn't stop at breakpoint in VSCode. However, VS Code debugging works when I put a break point in the Chrome DevTools itself. Here's my launch settings and sources in Chrome:

[whizkidwwe1217]

Nevermind, I actually managed to get it working by just copy & pasting the sourceMapPathOverrides from the vs-code-chrom-debugger docs: https://github.com/Microsoft/vscode-chrome-debug#sourcemaps

[raphael-volt]

Hi,
Debugger works when running ng serve.
I don't need to set sourceMapPathOverrides, userDataDir or sourceMaps in the lauch configurations.
But debugger does not work when running ng test.
To fix it :

• run ng test --source-map=false.
• launch the ng test configuration (see below)
• restart debugger

    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    }

vscode 1.29
Angular CLI: 7.1.0
Node: 8.14.0
OS: linux x64
Angular: 7.1.1

[dasariramacharan]

For people who are not able to get breakpoints work
Use the workaround

debugger

text as this works even though breakpoints don't work

[jason-cannon]

This is the configuration that works for me:

{
    "name": "ng serve",
    "type": "chrome",
    "request": "launch",            
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "trace": true,
    "userDataDir": "${workspaceFolder}/.vscode/chrome",
    "sourceMapPathOverrides": {
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "webpack:///./*":   "${webRoot}/*",
        "webpack:///*":     "*",
        "webpack:///src/*": "${webRoot}/*"
     }          
},

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}