Breakpoint ignored because generated code not found

Question

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 message: Breakpoint ignored because generated code not found

Here is what I have for my 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}"
        }
    ]
}

Answer 1

I figured out the problem. The Visual Studio Code Debugger only works with specific combinations of versions for the Debugger for Chrome, Angular CLI, and Angular. It does not work with Angular 4.0 with the 1.0 version of Angular CLI. However Angular 4.1.3 and Angular CLI 1.0.6 work fine. Follow these steps:

1. Install the Chrome Debugger Visual Code Extension
2. On the Debug menu, click Open Configurations

3. Modify your .vscode\launch.json to look like this:

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome against localhost",
               "url": "http://localhost:4200",
               "webRoot": "${workspaceRoot}"
           },
           {
               "type":"chrome",
               "request": "launch",
               "name": "Launch Chrome against Karma",
               "url": "http://localhost:9876/?id=9792346",
               "webRoot": "${workspaceRoot}"
           }
       ]
   }
   

4. CLOSE All Chrome Browsers

5. Run npm start at the command line in the directory for your application
6. Set a breakpoint in the code
7. Press Control-F5 in the browser