Unable to set breakpoints in Angular 2 application in Visual Studio Code

Question

Unable to set breakpoints in Angular 2 application in Visual Studio Code

I am using the Chrome Debugger extension for Visual Studio code with an Angular 2 application, where the initial setup was done using the Angular CLI. I looked at a few stack overflow questions and tried a few things, but nothing works. I keep getting the message: Breakpoint is ignored because the generated code was not found

Here is what I have for tsconfig.json generated using Angular CLI

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

Here is what I have for launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "trace": true,
            "webRoot": "${workspaceRoot}/src",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///C:*":"C:/*"
            }
        }

    ]
}