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?

If you want to debug using chrome extension then refer this - stackoverflow.com/questions/36494938/… — Sanket
– Sanket, Commented Jun 11, 2016 at 9:43
Possible duplicate of Debug & Run Angular2 Typescript with Visual Studio Code? — Narottam Goyal
– Narottam Goyal, Commented Apr 25, 2017 at 15:02

Kyle Trauberman · Accepted Answer · 2016-10-27 03:46:45Z

16

You have to do:

Install the "Debugger for Chrome"-Extension
Delete the launch.json and create a new one (select "Chrome" instead of "Node.js").
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"
}

Start the server with "npm start" (terminal-window or console).
Launch Debugging (F5 or select "Launch Chrome against localhost..." in the dropdown).

edited Oct 27, 2016 at 3:46

Kyle Trauberman

25.7k13 gold badges88 silver badges124 bronze badges

answered Aug 28, 2016 at 15:11

Michael Csitkovics

3394 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Csitkovics Over a year ago

This will hit the breakpoints in the ts-files. I figured out, that the userDataDir is important!

kaefert Over a year ago

this works for the "tour-of-heroes-tutorial" project from github.com/angular/quickstart but it doesn't for a project generated with "ng new projectname" which does not have *.js & *.js.map files in its src/app/ directory. Is there a way to get working debugging with a project structure that does not have generated files below src/ ?

Alexander Lindsay Over a year ago

Additionally, you can use the preLaunchTask option to call a task code.visualstudio.com/docs/editor/tasks and have that task run "npm start" to get everything working with just the f5

Collectives™ on Stack Overflow

Debugging Angular2 apps in Visual Studio Code

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related