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

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.

[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]

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.