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

jmesa-sistel · 2019-07-31T06:14:29Z

🐞 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

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2019-07-31T07:53:57Z

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 · 2019-07-31T08:49:05Z

@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 · 2019-07-31T10:05:16Z

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 · 2019-07-31T10:27:04Z

@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 · 2019-07-31T10:38:03Z

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

alan-agius4 · 2019-07-31T11:13:48Z

@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 · 2019-07-31T11:57:22Z

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 · 2019-07-31T12:06:27Z

@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

jmesa-sistel · 2019-07-31T12:23:09Z

@alan-agius4
I have tested to add sourceRoot in angular.json but no luck (all combinations: '/', '../', '../../').
Do you need more info? or do you want I test something else?

alan-agius4 · 2019-07-31T13:18:37Z

The sourceRoot is not in angular.json.

You can try adding it in node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/utils.js (It’s an option of SourceMapDevToolPlugin)

Note: you’d need to restart ng serve after doing the change.

I’ll try to take a look at this tomorrow.

kccsf · 2019-07-31T15:18:38Z

Not sure if linked, but breakpoints are also broken in Visual Studio, using the same version (@angular-devkit/build-angular 0.801.3). No basehref set though ........

Repro ('dotnet new angular' that has had package versions increased):
https://github.com/kccsf/BrokenBreakpoints

Potentially(!) useful info:
main.js.map using an earlier working version (0.801.0) prefixes files with webpack;///:
"sources":["webpack:///./src/app/app.component.html","webpack:///./src/app/counter/counter.component.html","webpack:///./src/app/fetch-data/fetch-data.component.html","webpack:///./src/app/home/home.component.html","webpack:///./src/app/nav-menu/nav-menu.component.html","webpack:///(webpack)/hot sync nonrecursive ^\\.\\/log$","webpack:///./src/$_lazy_route_resource lazy namespace object","webpack:///./src/app/app.component.ts","webpack:///./src/app/app.module.ts","webpack:///./src/app/counter/counter.component.ts","webpack:///./src/app/fetch-data/fetch-data.component.ts","webpack:///./src/app/home/home.component.ts","webpack:///./src/app/nav-menu/nav-menu.component.css","webpack:///./src/app/nav-menu/nav-menu.component.ts","webpack:///./src/environments/environment.ts","webpack:///./src/main.ts"]

0.801.3 doesn't:
"sources":["./src/app/app.component.html","./src/app/counter/counter.component.html","./src/app/fetch-data/fetch-data.component.html","./src/app/home/home.component.html","./src/app/nav-menu/nav-menu.component.html","(webpack)/hot sync nonrecursive ^\\.\\/log$","./src/$_lazy_route_resource lazy namespace object","./src/app/app.component.ts","./src/app/app.module.ts","./src/app/counter/counter.component.ts","./src/app/fetch-data/fetch-data.component.ts","./src/app/home/home.component.ts","./src/app/nav-menu/nav-menu.component.css","./src/app/nav-menu/nav-menu.component.ts","./src/environments/environment.ts","./src/main.ts"]

When setting a breakpoint in Visual Studio, the following is logged to C:\Users\xxxxxxx\AppData\Local\Temp\vscode-chrome-debug.txt:

[14:15:48.100 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.7.50","Versions.DebugAdapter":"4.11.4","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@111fe1e15d5ced26080a7dc239bcfe70f6c49aad","Versions.Target.UserAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36","Versions.Target.V8":"7.6.303.27","Versions.Target.Project":"Chrome","Versions.Target.Version":"76.0.3809.87","fileExt":".ts"}}}
[14:15:48.100 UTC] SourceMaps.setBP: c:\xxxxxx\visual studio projects\xxxxxx\xxxxxx.web\clientapp\src\app\counter\counter.component.ts can't be resolved to a loaded script. It may just not be loaded yet.
[14:15:48.100 UTC] Paths.setBP: No target url cached yet for client path: c:\xxxxxx\visual studio projects\xxxxxx\xxxxxx.web\clientapp\src\app\counter\counter.component.ts.
[14:15:48.100 UTC] To client: {"seq":0,"type":"response","request_seq":32,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"id":1003,"verified":false,"message":"Breakpoint set but not yet bound"}]}}
[14:15:48.100 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/setBreakpoints","data":{"Versions.DebugAdapterCore":"6.7.50","Versions.DebugAdapter":"4.11.4","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@111fe1e15d5ced26080a7dc239bcfe70f6c49aad","Versions.Target.UserAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.87 Safari/537.36","Versions.Target.V8":"7.6.303.27","Versions.Target.Project":"Chrome","Versions.Target.Version":"76.0.3809.87","successful":"true","timeTakenInMilliseconds":"0.344799","requestType":"request"}}}```

alan-agius4 · 2019-07-31T17:17:22Z

@kccsf, can you provide the exact steps to replicate? Are you using build or serve?

Can you also try patch to patch utils.js as described above and set a sourceRoot of / as see if it helps?

I’ll try to install Visual Studio the community version tomorrow and take a look at this.

kccsf · 2019-07-31T21:03:49Z

@alan-agius4 - great thanks.

Once you have cloned the code you should just need to:

Open the .proj file in Visual Studio
In the 'Solution Explorer' on the right hand side, Navigate to and open:
'ClientApp\src\app\counter\counter.compnent.ts'
Add a breakpoint by clicking on the vertical grey bar to the left of the line number of the line:

this.currentCount++;

Ensure you have 'Debug' selected in the dropdown just under the Menu bar
Hit F5 to launch debug

Your browser should launch and once the page has loaded you will notice that the breakpoint changes colour and has an alert icon. Hovering over it gives a tooltip that reads 'The breakpoint will not currently be hit. Breakpoint set but not yet bound'.

In the browser, clicking 'Counter' on the menu following by the 'Increment' button in the app confirms that the breakpoint does not get hit.

With regard to patching utils.js - I have tried adding sourceRoot in the following manner to no avail:

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

I couldn't see an option for sourceRoot in the docs:
https://webpack.js.org/plugins/source-map-dev-tool-plugin/

ng new xxxxx generates an angular.json file with the following in:
"sourceRoot": "src",

I have tried changing that from src to / also to no avail.

alan-agius4 · 2019-08-01T06:29:07Z

Thanks @kccsf, thanks for trying this out. I will continue looking at it today.

Regarding the sourceRoot option, it seems that it is an undocumented option of SourceMapDevToolPlugin

Code: https://github.com/webpack/webpack/blob/b088914eacd67b1884ed93142eda4de89c89b013/lib/SourceMapDevToolPlugin.js#L309

https://github.com/webpack/webpack/blob/3b6d1495c3858d59cfdb46b2343c07f2e4c1316d/schemas/plugins/SourceMapDevToolPlugin.json#L172

jmesa-sistel · 2019-08-01T08:02:41Z

@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?

alan-agius4 · 2019-08-01T08:44:57Z

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

kccsf · 2019-08-01T09:02:56Z

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

jmesa-sistel · 2019-08-01T09:42:08Z

@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

alan-agius4 · 2019-08-01T10:07:03Z

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

With this change we address 2 main issues related to unbound breakpoints: 1) in VS code when having a `baseHref` set. 2) Visual Studio when using an SPA inside a ASP.NET project For the latter, it seems that there is no way to set a `webRoot`. However, `webpack:///` seems to be handled internally and will be mapped to the `SpaRoot` ie `ClientApp` folder. Fixes: #15211

angular-automatic-lock-bot · 2019-09-09T19:41:51Z

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.}

alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Jul 31, 2019

alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix area: @angular-devkit/build-angular and removed needs: repro steps We cannot reproduce the issue with the information given labels Jul 31, 2019

ngbot bot added this to the Backlog milestone Jul 31, 2019

alan-agius4 mentioned this issue Aug 1, 2019

fix(@angular-devkit/build-angular): various breakpoints issues #15221

Merged

kyliau closed this as completed in #15221 Aug 2, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019 •

edited

Loading

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

kccsf commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

kccsf commented Jul 31, 2019 •

edited

Loading

alan-agius4 commented Aug 1, 2019

jmesa-sistel commented Aug 1, 2019 •

edited

Loading

alan-agius4 commented Aug 1, 2019

kccsf commented Aug 1, 2019

jmesa-sistel commented Aug 1, 2019

alan-agius4 commented Aug 1, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

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

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

Comments

jmesa-sistel commented Jul 31, 2019

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019 • edited Loading

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

jmesa-sistel commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

kccsf commented Jul 31, 2019

alan-agius4 commented Jul 31, 2019

kccsf commented Jul 31, 2019 • edited Loading

alan-agius4 commented Aug 1, 2019

jmesa-sistel commented Aug 1, 2019 • edited Loading

alan-agius4 commented Aug 1, 2019

kccsf commented Aug 1, 2019

jmesa-sistel commented Aug 1, 2019

alan-agius4 commented Aug 1, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Command (mark with an `x`)

alan-agius4 commented Jul 31, 2019 •

edited

Loading

kccsf commented Jul 31, 2019 •

edited

Loading

jmesa-sistel commented Aug 1, 2019 •

edited

Loading