Why did the breakpoints in vs19 stop working after angular 8 update?

[CreativeHouseDotOrg]

This Thread is a duplicate of Why did the breakpoints in vs19 stop working after angular 8 update? (Original on Stackoverflow)

Summarization:
I just updated my angular webproject yesterday from version 7.2.15 to 8.1.2 with the angular cli and the ng update command. But now if I try to debug my typescript code, all of a sudden the breakpoints won't work anymore in visual studio community 2019?

So when I activate a breakpoint, then the breakpoint turns white and shows a label text that says something like: Breakpoint set but not yet bound.

What I've already tried:
When using google I found out that other users had a similiar issue and they resolved the problem by setting inside of tsconfig.json.

"sourceMap": true

Unlucky for me this didn't change anything since my tsconfig.json already had the property sourceMap set to true but the breakpoints still wouldn't get hit.

My guess is that the angular update somewhat overwrote some setting in some file, which I'm totally not aware of.

Show some code:
Looking in to the comparison of my commits, I noticed that in tsconfig.json and package.json files a lot of other stuff has also changed like:

tsconfig.json

+ "downlevelIteration": true,
- "module": "es2015",
+ "module": "esnext",
- "target": "es5",
+ "target": "es2015",

package.json:

- "@angular-devkit/build-angular": "^0.12.4",
+ "@angular-devkit/build-angular": "~0.801.1",
- "codelyzer": "~4.5.0",
+ "codelyzer": "^5.0.1",
- "zone.js": "~0.8.29"
+ "zone.js": "~0.9.1"
- "typescript": "3.1.6"
+ "typescript": "3.4.5"

tslint.json:

- "use-input-property-decorator": true,
- "use-output-property-decorator": true,
- "use-host-property-decorator": true,
+ "no-inputs-metadata-property": true,
+ "no-outputs-metadata-property": true,
+ "no-host-metadata-property": true,

Expected Result/Behaviour: Expected would be that the breakpoints would hit so I could see what was going on in my code. But as said the breakpoints just go white and won't get bound.

The final question: So my question in the end would be: How to get the breakpoints working again in VS2019 after the angular 8 update?

(21.07.2019) Edit 1: Meanwhile I also tried to delete the 'node_modules' folder inside the ClientApp folder and reinstall it again with npm install. Unfortunately the breakpoints still won't get hit.

(22.07.2019) Edit 2: "This can't be the solution?" : Seems like reverting angular to version 7.2.15 has fixed the breakpoint issue and I can look in to my breakpoints again. Allthough I'm not quite satisfied with the approach because it would have been great to Update to the current Version. I also opened a case over at Stackoverflow, regarding this issue. I'll leave this open in case anyone has a better solution to upgrade from @7.2.15 to @latest stable.

[alan-agius4]

Duplicate of #15116

[CreativeHouseDotOrg]

@alan-agius4
Sorry I need to ask why should this be a duplicate of a VS Code related question? Seems to me that this is more like a Visual Studio Community 2019 related Issue as stated above? I've already seen this Topic #15116 but it doesn't help regarding Visual Studio Community 2019 due to the different configuration file like launch.json etc. Should I just re-ask the question on the Topic you've mentioned? Kind Regards

[alan-agius4]

@CreativeHouseDotOrg, it’s related cause paths in sourcemaps were being prefixed with / which leads to sourcemaps not to be resolved properly and hence breaks breakpoints in IDE’s.

Did you try to manually apply the changes of PR (#15129) that fixes the above issue to @angular-devkit/build-angular?

[CreativeHouseDotOrg]

@CreativeHouseDotOrg, it’s related cause paths in sourcemaps were being prefixed with / which leads to sourcemaps not to be resolved properly and hence breaks breakpoints in IDE’s.

Did you try to manually apply the changes of PR (#15129) that fixes the above issue to @angular-devkit/build-angular?

I haven't tried this approach yet. But I will be back on my working PC later on this evening and then I will try it in a new Branch and let you know 👍

Just a small other question regarding the update process in angular cli, should I use commonly use the --save modifier for this process? like when calling "ng update @angular/core --save" or does an important update get saved automatically to package.json?

[CreativeHouseDotOrg]

@alan-agius4

Alright, I navigated to my node_modules Folder inside my ClientApp Angular Project after updating.
Following the Path of your Fix the Path should be at "ClientApp\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs". I found an utils.js instead of ts. I opened it out of curiosity and searched for the word "moduleFilenameTemplate" and removed "[namespace]/" and saved it. Allthough it didn't help much since the breakpoints still don't get hit. Am I doing something wrong here?

Kind Regards

[alan-agius4]

Hi @CreativeHouseDotOrg this should also be addressed by #15221

[jsvb1977]

@CreativeHouseDotOrg were you able to resolve this issue? I am also experiencing the same problem in Visual Studio 2019 Professional.

[erjicles]

@alan-agius4 Do you know which release will contain #15221? Updating to @angular-devkit/build-angular 0.802.0 and @angular/cli 8.2.0 did not resolve this issue for me when using VS2019.

[jsvb1977]

@alan-agius4 Do you know which release will contain #15221? Updating to @angular-devkit/build-angular 0.802.0 and @angular/cli 8.2.0 did not resolve this issue for me when using VS2019.

@erjicles Great question -- updating to 8.2.0 did not resolve this issue for me, either.

[alan-agius4]

It’s in 8.2.1 - https://github.com/angular/angular-cli/releases/tag/v8.2.1

[erjicles]

It’s in 8.2.1 - https://github.com/angular/angular-cli/releases/tag/v8.2.1

Breakpoints are now working for me, thanks!

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