12

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
        }
    ]
}
Levi Fuller
  • 13,631
  • 4
  • 38
  • 44
  • Is node_modules/systemjs/dist/system.src.js valid location with file? Did you install it with npm package manager? – Vlado Tesanovic Dec 28 '15 at 07: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 Dec 28 '15 at 19:51
  • Possible duplicate of [Debug & Run Angular2 Typescript with Visual Studio Code?](http://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code) – Narottam Goyal Apr 25 '17 at 15:01

2 Answers2

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.

Rares Musina
  • 594
  • 1
  • 4
  • 17
  • It works... kind of. There are still some breakpoints which can't be hit for some reason (Screenshot: http://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? – Levi Fuller Apr 11 '16 at 01:15
  • 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 https://github.com/Microsoft/vscode-chrome-debug/issues/42, where they seem to be troubleshooting a use-case similar to ours. – Rares Musina Apr 11 '16 at 08:24
  • 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. – Levi Fuller Apr 12 '16 at 14:16
  • 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 Apr 12 '16 at 20:05
  • As for the 'jumping' breakpoints, it seems to be a bug in the [vscode-chrome-debug](https://github.com/Microsoft/vscode-chrome-debug/issues/48) 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. – Rares Musina Apr 12 '16 at 20:10
  • It seems they have deleted the Tour of Heroes sample from the repository? Perhaps since they were still encountering the 'jumping breakpoints' issue? – Levi Fuller May 02 '16 at 15:08
  • Just tested this with latest Chrome Debugger extension and VS Code using an Angular-CLI generated project. Works like a charm. – Levi Fuller Jul 27 '17 at 04:32
-4

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

"module": "commonjs",

Jaime
  • 5,770
  • 4
  • 23
  • 50