如何在 Visual Studio 代码中调试 Angular2 TypeScript 应用程序？

Question

如何在 Visual Studio 代码中成功配置和调试 Angular2 TypeScript 应用程序？

我试过导入 es6-shim 和 reflect-metadata 也没有成功。相关代码如下。如果您需要更多详细信息，请告诉我。

注意：我使用的是 Angular2 Beta。

错误信息

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
        }
    ]
}

Answer 1

在 tsconfig.json 中，您应该使用 CommonJS 配置：

"module": "commonjs",

Answer 2

我设法使用 debugger-for-chrome extension for vs code 完成了这项工作。只需按照此处提到的安装说明进行操作，然后创建一个类似于以下文件的 launch.json 文件：

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

还要确保在 tsconfig.json 中将 sourceMap 设置为 true。我的看起来像这样：

{
"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"
]}

我已经使用 angular2 tour-of-heroes 快速入门示例（typescript 版本）对其进行了测试，它运行良好。只要确保运行

npm start

在运行 chrome 中的 vs 调试器之前，所以有人为索引页面提供服务。

编辑 1： 扩展的作者还在他的 repository.

中添加了英雄之旅应用程序作为工作示例

如何在 Visual Studio 代码中调试 Angular2 TypeScript 应用程序？

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

debugging

typescript

visual-studio-code

angular