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
– Vlado Tesanovic, Commented Dec 28, 2015 at 7:53
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
– Levi Fuller, Commented Dec 28, 2015 at 19:51
Possible duplicate of Debug & Run Angular2 Typescript with Visual Studio Code? — Narottam Goyal
– Narottam Goyal, Commented Apr 25, 2017 at 15:01

Rares Musina · Accepted Answer · 2016-04-12 20:24:41Z

3

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.

edited Apr 12, 2016 at 20:24

answered Apr 10, 2016 at 21:50

Rares Musina

6141 gold badge5 silver badges17 bronze badges

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

7 Comments

Levi Fuller Over a year ago

It works... kind of. There are still some breakpoints which can't be hit for some reason (Screenshot: snag.gy/Hq6gC.jpg), and if you have a different outDir specified, it will only debug the js files. Any idea how I would fix this?

Rares Musina Over a year ago

You can specify a different outDIr in the launch.json file ({ configurations: { ... "outDir": "bin" } }). I am not sure yet about the breakpoints not being hit. I also saw it from time to time. I will have a look tonight, as I have 2 hunches - one is related to chrome caching js files, the other to my def server config. Will return with details. Meanwhile, you might want to have a look at github.com/Microsoft/vscode-chrome-debug/issues/42, where they seem to be troubleshooting a use-case similar to ours.

Levi Fuller Over a year ago

Cool, I'll try specifying the outDir in the launch.json. Let me know if you figure anything out for the breakpoints not being hit.

Rares Musina Over a year ago

I've done some more poking around, and I have some more info. First of all, for the outDIr problem. I also set a custom outDir (bin), and now my project looks like this: /root/bin/[comp.js, comp.map.js] /root/app/[comp.ts] /root/index.html In the tsconfig, I just specified "outDir": "bin" and in the index.html, I mad sure to load the js from the bin directory using System.import. No changes needed to the launch.config (sorry to have misguided you before, suggesting outDir in that file). If you have a different setup, you might want to play around with the webroot property.

Rares Musina Over a year ago

As for the 'jumping' breakpoints, it seems to be a bug in the vscode-chrome-debug extension, which was potentially fixed 3 days ago, and it doesn't seem to have been released yet. I'll try to install the dev version and see if it really fixes the issue.

|

Jaime · Accepted Answer · 2016-01-16 07:16:56Z

-4

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

"module": "commonjs",

answered Jan 16, 2016 at 7:16

Jaime

6,0254 gold badges27 silver badges53 bronze badges

1 Comment

Levi Fuller Over a year ago

That changes nothing.

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related