Unbound breakpoint - VS Code | Chrome | Angular

Question

I have an Angular application that I am trying to debug in VS Code.

When I compile and run the application (ng serve) the breakpoints are bound:

However, when I specify a different configuration e.g. -c qa or -c uat they are unbound:

1. Why are the breakpoints unbound when I specify a different configuration?
2. How do I bind the breakpoints for a debug session targeting a particular environment?

---

Relevant information

angular.json sample environment configuration:

"uat": {   "fileReplacements": [     {       "replace": "src/environments/environment.ts",       "with": "src/environments/environment.uat.ts"     }   ],   "optimization": true,   "outputHashing": "all",   "sourceMap": false,   "extractCss": true,   "namedChunks": false,   "extractLicenses": false,   "vendorChunk": false,   "buildOptimizer": true,   "budgets": [     {       "type": "initial",       "maximumWarning": "2mb",       "maximumError": "5mb"     },     {       "type": "anyComponentStyle",       "maximumWarning": "6kb",       "maximumError": "10kb"     }   ] }, 

Software versioning:

• Visual Studio Code 1.50.1
• Chrome 83.0.4103.122
• Debugger for Chrome 4.12.11
• JavaScript Debugger (Nightly) 2020.10.2217

Answer 1

The fix for this was simple, I hadn't set the sourceMap property to true in angular.json for that particular environment, instead I had "sourceMap": false,

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap for more info.

With thanks to Connor - https://github.com/microsoft/vscode-js-debug/issues/872

Answer 2

In my case I needed to change webroot

FROM

"webRoot": "${workspaceFolder}"

TO "webRoot": "${workspaceFolder}\projectName"

Project name is the name you've given in the beginning ng new projectName

Then breakpoint bound.