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

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

我严格按照VS代码教程中的说明进行了操作，但调试无法正常进行。首先，我在控制台上运行

ng serve

，然后在启动时按F5。（已启用用于Chrome扩展的VS代码调试器）。然后按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.
}

json不包含任何“附加”配置，因此我想知道如何启用调试，如果您能理解这里应该发生什么，并希望了解失败原因的线索，我将不胜感激

这里的另一篇文章提出了一个看起来更完整的启动配置，但它也不起作用：要使用它，我首先在控制台上运行

ng serve

，然后

使用sourcemaps对本地主机启动Chrome

，然后

使用sourcemaps附加到Chrome

附加，但是在“源代码”窗格中仍然没有启用断点，只有空圆圈

 {
        "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.

---

这个问题原来是新手犯的一个小错误，尽管如果您不熟悉角度文件结构应该是什么样子，那么就很难弄清楚。教程说：

现在可以通过键入以下内容创建新的角度应用程序：

ng new my-app

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

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

当您创建

launch.json

文件时，虽然它被放置在工作区根目录中，但它应该与其他项目文件位于同一文件夹中，而不是一个以上的级别。希望这能帮别人省点麻烦

ng new my-app