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

Posted 2023-03-13

技术标签:

【中文标题】如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？【英文标题】：How to debug an Angular2 TypeScript application in Visual Studio Code? 【发布时间】：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?的可能重复 【参考方案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”，

【讨论】：

这没有任何改变。

以上是关于如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？的主要内容，如果未能解决你的问题，请参考以下文章

visual studio code如何运行c

Deepin系统中如何安装Visual Studio Code

如何在 Linux 中安装 Visual Studio Code

如何在 Visual Studio Code 中自动获取参数名称？

如何在 Visual Studio Code 中注释多行？

如何在 Visual Studio Code 中隐藏缩进指南？