I have an Angular application that I am trying to debug in VS Code.
Currently when I serve the application e.g. ng serve
my breakpoints are bound and the breakpoints get hit:
However, when I serve via a different configuration e.g. ng serve -c qa
or ng serve -c uat
the breakpoints become unbound:
I can't seem to find any relevant information on the internet (including SO) related to this issue.
Is there a reason why the breakpoints become unbound? How can I get the breakpoints to hit when serving with different environment configurations?
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
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:
1.50.1
83.0.4103.122
4.12.11
2020.10.2217
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