Your Angular VS Code project can contain either a simple application, or multiple. When you have multiple, it can cause issues with connecting a debugger. Here’s the trick on how to handle that situation:
After you create a new Angular app then try to debug it in VSCode, you can often get the error “Breakpoint set but not yet bound” when you try to set a break point.
sourceMapPathOverrides is critical
The fix is simple, just indicate the actual path to the webRoot, not just the workspaceFolder in the launch.json.
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/my-app/src",
"sourceMaps": true,
"sourceMapPathOverrides": {
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
}
]
}
When you just have a single application (you don’t have a Project/ folder) set the webRoot to
"webRoot": "${workspaceFolder}"
Tip: When you open the folder in VS Code, do so at the root where the .vscode folder is. The e2e, src etc folders should all be at the top level.
Some Gotchas:
- I’ve noticed that sometimes you still get the error “Breakpoint set but not yet bound” after the first try. After you build then try to debug, close VSCode and Chrome then open up again. That sometimes helps.
-
sourceMapPathOverrides is critical
- Make sure that tsconfig.json has sourceMaps set to true
- When you run the app in Chrome, go to the dev tools and see if the ts files are displayed like this:
