@angular-devkit/build-angular 0.801.1: breakpoints not working in vscode

[jmesa-sistel]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: @angular-devkit/build-angular 0.801.0

Description

Breakpoints are not working in vscode since @angular-devkit/build-angular 0.801.1 version
If I go back to @angular-devkit/build-angular 0.801.0 breakpoints work fine

🔬 Minimal Reproduction

Add breakpoints in vscode and debug

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 8.1.1
Node: 12.4.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.1
@angular-devkit/core         8.1.1
@angular-devkit/schematics   8.1.1
@schematics/angular          8.1.1
@schematics/update           0.801.1
rxjs                         6.4.0

Anything else relevant?

OS: win32 x64
Not tested in linux
Tested @angular-devkit/build-angular 0.801.2 also, and breakpoints are not working

[alan-agius4]

Hi, can you please provide more information about the configuration in your .vscode/launch.json?

Are you following https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI and specifying the correct sourceMapPathOverrides?

[jmesa-sistel]

@alan-agius4
This is my launch.json since angular 5, the project began in January 2018

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against jira, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "disableNetworkCache": false,
            "url": "http://localhost:2990/jira/plugins/servlet/es.sistel.plugins.jira.bps/ide/editor",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch Chrome HMR against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "disableNetworkCache": false,
            "url": "http://127.0.0.1:4200/jira/editor",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "url": "http://127.0.0.1:2990/"
        }
    ]
}

I never need to add sourceMapPathOverrides, since angular 4.

PS
If I add sourceMapPathOverrides everything works again. Is this expected?

"sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*",
                "/./*": "${webRoot}/*",
                "/src/*": "${webRoot}/*",
                "/*": "*",
                "/./~/*": "${webRoot}/node_modules/*"
            }

Should I close the issue?

As you can see in the commit this is specific for angular 8.1:
Update sourceMapPathOverrides for angular-cli 8.1
The original issue in VSCode: Chrome Debugger once again doesn't break on breakpoints in typescript with Angular 8.1

[alan-agius4]

@jmesa-sistel, found the culprit that was causing this and made breaks work only with sourceMapPathOverrides

[roblourens]

What version of angular-cli will the fix go into? Can you check that it still works even with those sourceMapPathOverrides set? I want to make sure that our recommendation works and that we don't need to update it to say "use A for version X and B for version Y"

[alan-agius4]

sourceMapPathOverrides overrides will still work. The fix will be available in 8.1.2.

Edit The fix will be available in 8.1.3

[CreativeHouseDotOrg]

Seems like only reverting angular back to version 7.2.15 has fixed the breakpoint issue in visual studio community 2019 for me and I can look in to my breakpoints again.

[jmesa-sistel]

@alan-agius4 I guess you mean 8.1.3, because the problem is in 8.1.1 & 8.1.2. For me 8.1.0 is working fine.
Will you close the issue or should I close it?

[alan-agius4]

The issue will be closed automatically once the fix is merged. Yeah indeed the fix version will be 8.1.3.

[jmesa-sistel]

@alan-agius4
The issue is not fixed. I need sourceMapPathOverrides to get breakpoints working in 8.1.3.
Should I create a new issue?

Ohh My bad, @angular-devkit/build-angular: 0.801.3 is not out yet.

[CreativeHouseDotOrg]

Ohh My bad, @angular-devkit/build-angular: 0.801.3 is not out yet.

But it's still a good question. When will it be available?

[jmesa-sistel]

@alan-agius4
Is not working for me. When I execute .scripts in debug console I can see:
- ./src/app/shared/iframe/iframe.component.html (c:\Proyectos\BPS\src\webapp\jira\src\app\shared\iframe\iframe.component.html)

and it should be:

- ./src/app/shared/iframe/iframe.component.html (c:\Proyectos\BPS\src\webapp\src\app\shared\iframe\iframe.component.html)
I can see jira word which is my base href in angular.json ("baseHref": "/jira/")

PS:
Now to get breakpoints working I have to add:
"./*": "${webRoot}/*", to sourceMapPathOverrides

[angular-automatic-lock-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.}