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, CommentedJun 11, 2016 at 9:43
Possible duplicate of Debug & Run Angular2 Typescript with Visual Studio Code? — Narottam Goyal, CommentedApr 25, 2017 at 15:02

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

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).

This will hit the breakpoints in the ts-files. I figured out, that the userDataDir is important! — Michael Csitkovics, CommentedAug 28, 2016 at 16:16
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/ ? — kaefert, CommentedDec 19, 2016 at 14:10
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 — Alexander Lindsay, CommentedFeb 23, 2017 at 5:13

Collectives™ on Stack Overflow

Debugging Angular2 apps in Visual Studio Code

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related