How to debug an Angular2 TypeScript application in Visual Studio Code?

I managed to make this work using the debugger-for-chrome extension for vs code. Just follow the installation instructions mentioned there, and create a launch.json file similar to this one:

{"version": "0.2.0","configurations": [    {        "name": "Launch localhost with sourcemaps",        "type": "chrome",        "request": "launch",        "url": "http://localhost:3000",        "sourceMaps": true,        "webRoot": "${workspaceRoot}"    }]}

Also make sure that you have sourceMap set to true in your tsconfig.json. Mine looks like this:

{"compilerOptions": {    "target": "es5",    "module": "system",    "moduleResolution": "node",    "sourceMap": true,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "removeComments": false,    "noImplicitAny": false,    "watch": true},"exclude": [    "node_modules",    "typings/main",    "typings/main.d.ts"]}

I've tested it with the angular2 tour-of-heroes quickstart example (typescript version) and it works fine. Just make sure to run

npm start

before you run the vs debugger in chrome, so you have someone to serve the index page.

EDIT 1: The author of the extension has also added the tour-of-heroes app as a working example in his repository.

In tsconfig.json, you should be using CommonJS configuration:

"module": "commonjs",