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

@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

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.

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.

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.

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

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

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/cli@1.6.8
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/cli@1.6.8 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/*"
      }
}

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.

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}/*"
     }			
},

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

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

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!!