How to debug Angular 2 Typescript application

Question

How to debug Angular 2 Typescript application using visual code or with the developer tools?

Answer 1

Late to the party, but hope the following helps someone else. The solution will work for angular2 & angular4 = Angular on visual studio code.

1. Install new extension - Debugger for Chrome

2. A new folder will be created (automagically) under your project - '.vscode' -> 'launch.json'.

3. Edit 'launch.json' to reflect as below. Note, port 4200 is default to 'ng serve' adjust if yours is different.

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true
        }
    ]
   }

4. Finally we get to 'play' - click on 'debug' followed by clicking on the 'play' button (see below). From there a debug chrome window will open up, view console to see your console.log outputs.

HAPPY CODING! :-)