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

Question

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 github on the official @angular/cli hub, regarding this issue. I'll leave this open in case anyone has a better solution to upgrade from @7.2.15 to @latest stable.

Thank you

Answer 1

When upgrading from Angular 8.1 to 8.2 I figured out that I had to downgrade @angular-devkit/build-angular from 0.803.8 back to 0.801.2.

As explained in https://github.com/angular/angular-cli/issues/15139 the reason seems to be that sourceMap in launch.json breaks. For me it breaks sourceMapPathOverrides.

Even it points out it is fixed in angular-cli 8.2.1 it did not work with cli 8.3.8.

Answer 2

I finally found a Solution that has worked for me.

My Mistake: I believe my mistake was to try to update Angular AND Angular Material at the same time!

By either calling

ng update --all or chaining the update Commands like ng update @angular/core @angular/cli @angular/materials @angular/cdk which led the ng-cli to confuse the Dependencies between @angular/core/cli and @angular/material/cdk...

Solution: Instead I had to do it in two seperate Steps with one particular case of @latest:

ng update @angular/core@latest @angular/cli@latest Note: With @latest to install the latest available Angular that can be updated from 7... so in this case 8...

after that I ran:

ng update @angular/material @angular/cdk Note: Without @latest because else this would have updated the Angular dependency to version 9 (Next) since I already updated Angular to 8. (I tried it, had to revert the update twice c: sigh)

Then Angular 8 with the latest @angular-devkit/build-angular got installed correctly and my breakpoints would work again in visual studio.

Hope this helps someone in case of the dependency trouble!

Cheers!

Answer 3

Change "@angular-devkit/build-angular": "0.801.2" to "@angular-devkit/build-angular": "0.801.0"