时间戳

首页 > 解决方案 > 基于 Angular 教程的 Visual Studio 代码调试不起作用

angular - 基于 Angular 教程的 Visual Studio 代码调试不起作用

问题描述

我正在从 AnguarJS 迁移到 Angular，并使用 Visual Studio 代码进行实验。

我严格按照这里的 VS Code 教程中的说明进行操作，但无法进行调试。首先我ng serve在控制台上运行，然后在启动 chrome 时按 F5。（已启用 VS Code - Chrome 扩展调试器）。然后按 F5 并启动 Chrome。

症状是我无法设置断点。我得到一个橙色圆圈，它在标题 = 'Hello World' 行旁边变为一个空圆圈。这是我的主要问题。

我不明白的一件事是为什么我在本地机器上看不到任何生成的 javascript 文件，也看不到地图文件。ng-serve 会生成 javascript 文件但不保存它们吗？但是我也没有看到生成的映射文件，这与为什么没有启用调试断点有关吗？

上面引用的 MS 教程包含所有代码，但我尝试设置断点的相关模块如下。没什么大不了的：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Hello Fold';  // . <-- Tried set breakpoint here.
}

教程中指定的启动配置为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

launch.json 不包含任何“附加”配置，所以我想知道调试是如何启用的，希望了解这里应该发生的事情，并希望能提供有关失败原因的线索。

这里的另一篇文章建议了看起来更完整的启动配置，但它也不起作用：要使用它，我首先ng-serve在控制台运行Launch Chrome against localhost with sourcemaps，然后Attach to Chrome with sourcemaps附加，但断点仍然没有在源代码中启用窗格，只有空的圆圈。 

 {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4200",
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}",
        "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:4200",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}",
        "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
    }]}

这是我工作的环境：

Angular CLI: 8.3.21
Node: 11.2.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.

标签： angularvisual-studio-code

解决方案

这个问题被证明是一个微不足道的新手错误，尽管如果你不熟悉 Angular 文件结构应该是什么样子，那么要弄清楚这个问题并不容易。教程说：

您现在可以通过键入以下内容来创建一个新的 Angular 应用程序：

ng new my-app

my-app 是您的应用程序的文件夹名称

我的错误是在控制台中创建项目文件夹，没有意识到 ng new 将为项目本身创建文件夹。因此，当我在我创建的新目录中启动 VS Code，然后运行ng new my-app时，我创建了一个同名的子文件夹，所有项目文件都放入其中。

当您创建launch.json文件时，虽然它被放置在工作区根目录中，但它应该与其余项目文件位于同一文件夹中，而不是上一层。希望这可以避免其他人的一些困惑......

推荐阅读