Unbound breakpoint - VS Code | Chrome | Angular

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

Continue reading...