Debugging Angular2 apps in Visual Studio Code

Question

I'm trying to develop a basic angular2 app using VSC. The code is written in TypeScript. It is a basic todo app, and all the code (.ts, js, .js.map) is in the app/ subfolder.

This is my launch.json configuration for Run:

 {
            "name": "Run",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },

When I run it, the app loads in chrome but none of my breakpoints work. When I hover a breakpoint, I see "Breakpoint ignored because generated code not found (source map problem?)."

I've got one breakpoint in /app/todo.component.ts. In my /app/todo.component.js.map I can see:

"file":"todo.component.js","sourceRoot":"/Users/xxx/Documents/webs/angular2-todo/app/","sources":["todo.component.ts"],"names":[],"mappings":";;;;;;;;;;

Source root and sources seem ok to me.

Any ideas?

Answer 1

You have to do:

1. Install the "Debugger for Chrome"-Extension
2. Delete the launch.json and create a new one (select "Chrome" instead of "Node.js").
3. Change the port to 3000 (if you use lite-server, like in the tour-of-heroes-tutorial) and add an "userDataDir":

example:

{
    "name": "Launch Chrome against localhost, with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

4. Start the server with "npm start" (terminal-window or console).

5. Launch Debugging (F5 or select "Launch Chrome against localhost..." in the dropdown).