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

Question

How do you successfully configure and debug an Angular2 TypeScript application in Visual Studio Code?

I have tried importing the es6-shim and reflect-metadata as well with no success. The relevant code is below. Please let me know if you require further details.

Note: I am using Angular2 Beta.

ERROR MESSAGE

Debugger listening on port 24565
c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1
System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
^

ReferenceError: System is not defined
    at Object.<anonymous> (c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1:1)
    at Module._compile (module.js:399:26)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.runMain [as _onTimeout] (module.js:431:10)
    at Timer.listOnTimeout (timers.js:93:15)

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/bin/boot')
            .then(null, console.error.bind(console));
    </script>
    <script>

    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

//import 'reflect-metadata';
// import 'es6-shim';
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

// This loads our AppComponent as the ROOT Component (The app entry point)
bootstrap(AppComponent);

app.component.ts

import {Component} from 'angular2/core';
import {StockComponent} from './stock/stock.component';

@Component({
    selector: 'my-app',
    templateUrl: 'app/src/app.view.html',
    directives: [StockComponent]
})
export class AppComponent{
    public name: string;

    getStock(){
        this.name = "hello";
        console.log('trying');
    }
}

Launch.json

{"version": "0.2.0",
    "configurations": [
        {
            "name": "Launch type",
            "type": "node",
            "program": "app/src/boot.ts",
            "stopOnEntry": true,
            "sourceMaps": true,
            "outDir": "app/bin"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 3000
        }
    ]
}

Is node_modules/systemjs/dist/system.src.js valid location with file? Did you install it with npm package manager? — Vlado Tesanovic
Yes, I did install via npm. The application runs fine via npm start and the error is only encountered while trying to Launch via "debug mode". — Levi Fuller
Possible duplicate of Debug & Run Angular2 Typescript with Visual Studio Code? — Narottam Goyal

Rares Musina Rares Musina · Accepted Answer · 2016-04-10T21:50:11

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.

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

2 Answers