如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？答案

【问题标题】：How to debug an Angular2 TypeScript application in Visual Studio Code?如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？
【发布时间】：2016-04-01 20:52:16
【问题描述】：

如何在 Visual Studio Code 中成功配置和调试 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
        }
    ]
}

【问题讨论】：

node_modules/systemjs/dist/system.src.js 是文件的有效位置吗？你是用 npm 包管理器安装的吗？
是的，我确实是通过 npm 安装的。该应用程序通过npm start 运行良好，并且仅在尝试通过“调试模式”启动时遇到错误。
Debug & Run Angular2 Typescript with Visual Studio Code?的可能重复

标签： debugging typescript angular visual-studio-code

【解决方案1】：

我设法使用 debugger-for-chrome extension 用于 vs 代码来完成这项工作。只需按照那里提到的安装说明，并创建一个类似于此的 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 快速入门示例（打字稿版本）对其进行了测试，它工作正常。只要确保运行

npm start

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

编辑 1： 扩展程序的作者还在他的 repository 中添加了英雄之旅应用程序作为工作示例。

【讨论】：

它工作......有点。还有一些断点由于某种原因无法命中（截图：snag.gy/Hq6gC.jpg），如果你指定了不同的outDir，它只会调试js文件。知道如何解决这个问题吗？
您可以在 launch.json 文件中指定不同的 outDIr ({ configurations: { ... "outDir": "bin" } })。我还不确定断点没有被击中。我也时不时看到。今晚我会看看，因为我有 2 个预感 - 一个与 chrome 缓存 js 文件有关，另一个与我的 def 服务器配置有关。将返回详细信息。同时，您可能想看看github.com/Microsoft/vscode-chrome-debug/issues/42，他们似乎正在对与我们类似的用例进行故障排除。
酷，我将尝试在 launch.json 中指定 outDir。让我知道您是否对未命中的断点有任何了解。
我做了一些更多的探索，我有更多的信息。首先，对于outDIr问题。我还设置了一个自定义的outDir（bin），现在我的项目看起来像这样：/root/bin/[comp.js, comp.map.js] /root/app/[comp.ts] /root/index.html在 tsconfig 中，我只是指定了“outDir”：“bin”，在 index.html 中，我肯定会使用 System.import 从 bin 目录加载 js。不需要对 launch.config 进行任何更改（很抱歉之前误导了您，建议在该文件中使用 outDir）。如果您有不同的设置，您可能想要使用 webroot 属性。
至于“跳跃”断点，似乎是vscode-chrome-debug 扩展中的一个错误，可能在 3 天前修复，现在似乎还没有发布。我会尝试安装开发版，看看它是否真的能解决问题。

【解决方案2】：

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

“模块”：“commonjs”，

【讨论】：

这没有任何改变。