Angular debug cli with source map vs code not working

Question

Hi, I created the application using angular-cli and I am trying to debug it using the vs and Debugger code for the chrome extension. After a while, I was able to make it work, well, sort of. What happens is that I can set a breakpoint in my typescript class, but it is placed on the wrong line number, for example, on the original map.

Debugging process - open ng terminal, than go to debug tab and press F5 in vscode

I have the following: I am using 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

I upgraded to angular-cli-beta19-3 and typescript 2.0.6 and cleared the cache in chrome, now it works.

UPDATE: using angular 2.4.1 now

Funny that it doesn't work with

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

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

but he works with

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

and for linux as @carpinchosaurio said

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

UPDATE 2/21/2017:

Newer versions of angular and typescript no longer need to override the source map path.

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

Operation setting:

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

Answer 2

for those who are still interested in 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 }