Angular cli debuging with vs code source map not working

Question

Hi i have built an app using angular-cli and I am trying to debug it using vs code and Debugger for chrome extension. After a while I was able to make it work, well kind of. What happens is that i can set a break-point in my typescript class but it gets placed on a wrong line number like source map is incorrect.

Debug process - open terminal ng serve than go to debug tab and click F5 in vscode

I have the following: I use LaunchChrome configuration

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "LaunchChrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
             "sourceMapPathOverrides": {
            "webpack:///C:*": "c:/*"
        }
        },
        {
            "name": "AttachChrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }
    ]
}

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.18",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "./dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../semantic/dist/packaged/semantic.css"
      ],
      "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../semantic/dist/packaged/semantic.js",
          "../node_modules/chart.js/dist/Chart.bundle.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

tsconfig.json

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

Answer 1

Just to emphasize more the updated answer: Currently it's not needed to have the sourceMapPathOverrides property in your launch.json. In case you are updating project from an old Angular, just remove the property and debugging will start working.

Answer 2

for anyone still interested this worked for me -

 {
        "name": "Launch localhost with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4200",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}/src",          
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "sourceMapPathOverrides": {              
             "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
             "webpack:///./src/*": "${workspaceRoot}/src/*"
        }
        // Uncomment this to get diagnostic logs in the console
        // "diagnosticLogging": true
    }

Answer 3

I have updated to angular-cli-beta19-3 and typescript 2.0.6 and cleared cache in chrome now it works.

UPDATE: using angular 2.4.1 now

Whats funny is that it doesnt work with

"sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
}

defined here https://github.com/Microsoft/vscode-chrome-debug

but it works with

"sourceMapPathOverrides": {
    "webpack:///C:*": "c:/*"
}

and for linux as @carpinchosaurio said

"webpack:///*": "/*"

UPDATE 2/21/2017:

With new versions of angular and typescript there is no need for source map path overrides anymore.

"@angular/compiler-cli": "2.4.8",
"@angular/cli": "1.0.0-beta.32.3",
"typescript": "2.1.6"
angular version 2.4.8

Working setup:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "LaunchChrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome"
    }
  ]
}