The breakpoint is ignored because the generated code was not found
I am trying to set a breakpoint in Visual Studio Code under Windows 7 using the Chrome Debugger extension for an Angular 4 project that was generated by the Angular CLI. I am getting the error: Breakpoint is being ignored because the generated code was not found
Here is what I have for tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
}
}
Here is what I have for my launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}\\*"
}
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
source to share
I figured out the problem. The Visual Studio Code Debugger only works with certain combinations of debugger versions for Chrome, Angular CLI, and Angular. It doesn't work with Angular 4.0 with 1.0 version of Angular CLI. However Angular 4.1.3 and Angular CLI 1.0.6 work fine. Follow these steps:
- Install Chrome Debugger Visual Code Extension
- In the "Debug" menu click "Open Configurations"
-
Modify your .vscode \ launch.json so it looks like this:
{"version": "0.2.0", "configurations": [{"type": "chrome", "request": "launch", "name": "Run Chrome on localhost", "url": " http : // localhost: 4200 "," webRoot ":" $ {workspaceRoot} "}, {" Type ":" chrome "," request ":" launch "," name ":" Launch Chrome against Karma "," url ":" http: // localhost: 9876 /? id = 9792346 "," webRoot ":" $ {workspaceRoot} "}]}
-
CLOSE ALL Chrome Browsers
- Run npm run on command line in the directory for your application
- Set breakpoint in code
- Press the control button F5 in the browser
source to share