-4

I'm trying to run angular2 project from vs code. Here is the tsconfig, lanuch.json files.

tsconfig.json

{
  "compilerOptions": {
    "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"
    ]
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}/src",
            "sourceMaps": true
            // "runtimeExecutable": "/usr/bin/chromium-browser",
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src"
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        }
    ]
}

I can't able to set breakpoint on my vscode editor. If I do so, it automatically gets disabled because of the mapping problem.

enter image description here

Avinash Raj
  • 172,303
  • 28
  • 230
  • 274
  • use chrome debugger instead also you can put `debug;` in your code so it will trigger automatically in chrome debugger. I had similar issue and just give up for now on trying to use vscode to debug my angular 2 apps. – angularrocks.com Feb 06 '17 at 09:17
  • I already installed Chrome debugger on Vscode and `debug;` inside code shows error. – Avinash Raj Feb 06 '17 at 09:31
  • I meant to debug in chrome browser :)) – angularrocks.com Feb 06 '17 at 09:34
  • In chrome browser also, I can't set breakpoint in some places. If I do so, then it stops at different positions, lets say If I add breakpoints for the lines 10,11,12, it directly comes to 12. And also I can't view the variable (exists on the line) contents. – Avinash Raj Feb 06 '17 at 09:36
  • ya.. My projects uses anguylar cli – Avinash Raj Feb 06 '17 at 09:41
  • I just checked my `tsconfig`, only difference I can see is that my has `"baseUrl": "",` option that missed in yours. And in my case I am not using `launch.json`. Try `ng serve` in console - is it making difference? – angularrocks.com Feb 06 '17 at 09:43
  • sorry, no luck.. I got stuck on this for half a day. You see in the above pick, don't know why webpack adds my whole path.. /home/,,,, – Avinash Raj Feb 06 '17 at 09:45
  • what is your `ng -v` and `npm -v`? – angularrocks.com Feb 06 '17 at 09:46
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134952/discussion-between-avinash-raj-and-kuncevic). – Avinash Raj Feb 06 '17 at 09:47
  • This is the project https://github.com/feedlike/inspinia-3/tree/master/Angular_2_CLI_Seed_Project I'm actually working on. – Avinash Raj Feb 08 '17 at 07:48

1 Answers1

0

I added a full explanation to another question, but here's a quick recap:

Add this to your launch.json:

"diagnosticLogging": true

This will dump a lot of extra information into the console. Just look for the name of one of your TypeScript files and you will see the path where Chrome expects to find your source file. Adjust your sourceMapPathOverrides to help it match the actual path and you're good to go.

Community
  • 1
  • 1
Cobus Kruger
  • 8,338
  • 3
  • 61
  • 106