@angular-devkit/build-angular 0.801.3: breakpoints not working in vscode, baseHref is added to the resolved path

[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: ....

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

Description

A clear and concise description of the problem...

Breakpoints are not working in vscode in @angular-devkit/build-angular 0.801.3 version
Seems that baseHref is added in the resolve path

🔬 Minimal Reproduction

Try to debug a project in vscode adding baseHref in angular.json

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 8.1.3
Node: 12.4.0
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/cdk                      8.1.2
@angular/pwa                      0.801.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant?

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/")

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

I created a new issue because I don't get any response in the issue #15116

[alan-agius4]

Hi, had a quick look at this and I was unable to reproduce.

Can you confirm that you are adding the baseHref to the url in your launch.json?

Can you setup a minimal repro please? You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[jmesa-sistel]

@alan-agius4
Just for curiosity, why not use
[moduleFilenameTemplate: '[absolute-resource-path]'
instead
[moduleFilenameTemplate: '[resource-path]' ?

When I do this change then everything is working

I'll try to create a minimal repro with the bug

[alan-agius4]

IMHO, the main reasons are;

• it will most likely break when debugging on a different machine. Example when trying to debug an application which was built on a CI server.
• Apart from that you might be exposing sensitive paths if you deploy your source maps
• stacktraces will be quite verbose

Instead of

[jmesa-sistel]

@alan-agius4
The minimal repro. https://github.com/jmesa-sistel/breakpoints_8_1_3
Just add a breakpoint in app.component.ts.
Do not use debugger; just add the breakpoint run debug and press in the button Click me, the breakpoint is missed, also you will notice it because it will be grey instead red.

When I execute .scripts command in debug console I can see:
- ./src/app/app.component.html (d:\web\repro-app\jira\src\app\app.component.html)
instead
- ./src/app/app.component.html (d:\web\repro-app\src\app\app.component.html)

Have you added "baseHref": "/jira/" in your angular.json ?

         "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "repro-app:build",
                        "baseHref": "/jira/"
                    },

[jmesa-sistel]

@alan-agius4
I have found that if I replace
"baseHref": "/jira/"
by
"baseHref": "/jira"
then breakpoints works again

[alan-agius4]

@jmesa-sistel, probably this can be fixed by setting the sourceRoot option when having a baseHref like /jira/ to ../ or we always set it to /.

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts

Lines 93 to 97 in 5df50ba

	return new SourceMapDevToolPlugin({
	filename: inlineSourceMap ? undefined : '[file].map',
	include,
	moduleFilenameTemplate: '[resource-path]',
	append: hiddenSourceMap ? false : undefined,

[jmesa-sistel]

The problem using "baseHref": "/jira" is that assets are not working in webdevserver.
http://127.0.0.1:4200/jira/assets/i18n/en.json is not found but
http://127.0.0.1:4200/assets/i18n/en.json is found
Seems I need to add the last '/' to get webdevserver working properly but then I cannot get breakpoints working
In @angular-devkit/build-angular 0.801.0 everything was working fine

[jmesa-sistel]

@alan-agius4
I have done a test:
"baseHref": "/test/jira" in angular.json
and "url": "http://localhost:4200/test/jira/" in launch.json
Then debug and check http petitions on chrome (F12 -> Network)
When The main page ask for main.js I can see
http://localhost:4200/test/runtime.js
instead
http://localhost:4200/test/jira/runtime.js
So for me the right baseHref is when the href ends with '/', "baseHref": "/test/jira/" in this case