Breakpoints Invalid for Angular CLI 1.1.1

[weinand]

From @tonysneed on June 14, 2017 14:39

Breakpoint are not hit when using the Angular-CLI recipe with Angular CLI v 1.1.1. However they do work with Angular CLI v 1.0.6. This will need to be investigated. The issue was discussed in PR microsoft/vscode-recipes#2 by @weinand.

Copied from original issue: microsoft/vscode-recipes#7

[tonysneed]

Maybe the issue is more appropriate for the Chrome Debugger repo?

[roblourens]

I think the difference between versions is the webpack config for the sourcemap paths that it prints out. I just fixed an issue in the chrome debugger that addresses this (not released yet). But I'm confused because I swear that type of config was working earlier. I'll push that update soon.

Regarding the fact that you have to refresh to hit breakpoints in early code, how confusing do you think that is? What if there was a launch config option, refreshOnLaunch, that would cause it to launch Chrome, attach, set breakpoints, then refresh the page?

[tonysneed]

@roblourens +1 on the refresh browser option. Looking forward to the extension update!

[auchenberg]

I'm using angular-cli 1.1.0 and don't see any issues when breaking on event handlers inside src/app/app.component.ts.

@weinand Can you provide some more details on where you are trying to break?

We have a generic issue on breaking on immediate running code, which refreshOnLaunch can help reduce

[weinand]

@auchenberg I've just tried to follow the recipe on a clean macOS and Windows 10. I've set a breakpoint in line 9 of src/app/app.component.ts an this is not hit on macOS or Windows 10.

We've investigated the issue and it seems that the Chrome debugger for VS Code has a problem with source maps of a Angular project created by the latest (1.1.1) Angular-CLI generator.

We've created issue #28730 to track this.

[auchenberg]

Indeed, this looks like a change in the generated sourcemap. @roblourens a quick comparison:

Angular-cli 1.1.1

› http://localhost:4200/main.bundle.js
    - webpack:////Users/auchenberg/development/angular-demo/src async (/Users/auchenberg/development/angular-demo/src/webpack:/Users/auchenberg/development/angular-demo/src async)
    - webpack:////Users/auchenberg/development/angular-demo/src/app/app.component.css (/Users/auchenberg/development/angular-demo/src/webpack:/Users/auchenberg/development/angular-demo/src/app/app.component.css)
    - webpack:////Users/auchenberg/development/angular-demo/src/app/app.component.html (/Users/auchenberg/development/angular-demo/src/webpack:/Users/auchenberg/development/angular-demo/src/app/app.component.html)
    - webpack:////Users/auchenberg/development/angular-demo/src/app/app.component.ts (/Users/auchenberg/development/angular-demo/src/webpack:/Users/auchenberg/development/angular-demo/src/app/app.component.ts)

Angular-cli 1.1.0

› http://localhost:4200/main.bundle.js
    - webpack:///./src async (/Users/auchenberg/development/angular-demo/src async)
    - webpack:///./src/app/app.component.css (/Users/auchenberg/development/angular-demo/src/app/app.component.css)
    - webpack:///./src/app/app.component.html (/Users/auchenberg/development/angular-demo/src/app/app.component.html)
    - webpack:///./src/app/app.component.ts (/Users/auchenberg/development/angular-demo/src/app/app.component.ts)

Looks like a sourceMapPathOverrides might be needed, as the sourcemap now contains an absolute path?

[weinand]

I've already tried to use the sourceMapPathOverrides but it did not make a difference for me (but may be I did not use them correctly).

[roblourens]

Right that's what I see. chrome-debug includes a mapping for that type of path by default, but it's broken. That's what the fix is for.

[roblourens]

Fixed in 3.1.4 :) - microsoft/vscode-chrome-debug-core@eab353e

[roblourens]

Verifier: execute this debug recipe: https://github.com/weinand/vscode-recipes/tree/master/Angular-CLI, ensuring that you have Angular CLI version 1.1.1+.

[auchenberg]

Confirmed fixed with https://github.com/Microsoft/vscode-chrome-debug/releases/tag/v3.1.4

[weinand]

I tried to verify and breakpoints are working fine for the the ng serve case.

The test setup (ng test) seems to have changed in a bigger way: they are now based on karma.
We are tracking this issue here: microsoft/vscode-recipes#9