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

🐞 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 20

Commits related to this issue

fix(@angular-devkit/build-angular): various breakpoints issues With this change we address 2 main issues related to unbound breakpoints: 1) in VS code when having a `baseHref` set. 2) Visual Studio w... — committed to angular/angular-cli by alan-agius4 5 years ago
fix(@angular-devkit/build-angular): various breakpoints issues With this change we address 2 main issues related to unbound breakpoints: 1) in VS code when having a `baseHref` set. 2) Visual Studio w... — committed to angular/angular-cli by alan-agius4 5 years ago

Most upvoted comments

I think I managed to find the sweet setting that will fix both issues for both the baseHref and Visual Studio.

sourceRoot: inlineSourceMap ? '' : 'webpack:///',

With the above change we should address all the issues related to debugging in IDE’s (or at least hope so)

With Visual Studio the problem is that there is no way to set a webRoot and the content root will be the VS project root path instead of the ClientApp.

Example

Content root path: C:\git\cli-repos\dotnet

instead of

Content root path: C:\git\cli-repos\dotnet\ClientApp

alan-agius4 on Aug 1, 2019

Thanks all, for being so helpful and for confirming that the tentative fix work. Much appreciated.

alan-agius4 on Aug 1, 2019

@alan-agius4 I can confirm is working in VSCode. Now .scipts return:

webpack:///./src/app/plugins/code-editor/code-editor/code-editor.component.html (c:\Proyectos\BPS\src\webapp\src\app\plugins\code-editor\code-editor\code-editor.component.html)

Thanks for helping fixing it

jmesa-sistel on Aug 1, 2019

@alan-agius4 - Change confirmed working in Visual Studio. Many thanks 😃

kccsf on Aug 1, 2019

@alan-agius4 Adding sourceRoot: '/' to SourceMapDevToolPlugin works for me in VS Code.

PS: this is what I see in console debug when I execute .scripts

/./src/app/plugins/code-editor/code-editor/code-editor.component.html (c:\Proyectos\BPS\src\webapp\src\app\plugins\code-editor\code-editor\code-editor.component.html)

Before change:

./src/app/plugins/code-editor/code-editor/code-editor.component.html (c:\Proyectos\BPS\src\webapp\jira\src\app\plugins\code-editor\code-editor\code-editor.component.html)

Will this change affect to trying to debug an application which was built on a CI server?