#VSCode: Handling Debugging Error “Breakpoint set but not yet bound”

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.

The fix is simple, just indicate the actual path to the webRoot, not just the workspaceFolder in the launch.json. This depends on if you opened the workspace in the root of the app, or deeper. It must take that into consideration. workspaceFolder or workspaceFolder/your-app/

{
 
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/<app folder here sometimes>",
      "sourceMaps": true,
      
      --SOMETIMES THIS IS NEEDED--
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/*"
      }
       
    }
  ]
}

When you just have a single application (you don’t have a Project/ folder) you might have to 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:

• It’s all about in what folder you opened your workspace in. This affects “webRoot”: “${workspaceFolder}/MAYBE-THIS-my-app/”
• 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.
• 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: