如何在 Visual Studio Code 中调试 Angular 多项目工作区答案

【问题标题】：How can I debug an Angular multi-project workspace in Visual Studio Code如何在 Visual Studio Code 中调试 Angular 多项目工作区
【发布时间】：2019-11-09 14:41:56
【问题描述】：

如何使用VS Code - Debugger for Chrome 在 VSCode 中调试 Angular 多项目工作区？迁移到 Angular 多项目工作区后，调试不再起作用。如果我设置断点，我会收到以下消息。

已设置断点但尚未绑定

我找到了一个关于这个主题的blog post："Visual Studio Code Breakpoints for Angular Multi-Project Workspace"。我在launch.json 中添加了以下内容，我将"webRoot": "${workspaceRoot}"" 替换为"webRoot": "${workspaceFolder}"：

{
    "name": "Launch new-app in Chrome against localhost (with sourcemaps)",
    "type": "chrome",
    "request": "launch",
    "runtimeExecutable": "/usr/bin/chromium-browser",
    "runtimeArgs": [
        "--disable-extensions"
    ],
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "/./*": "${webRoot}/projects/new-app/*",
        "/src/*": "${webRoot}/projects/new-app/src/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*",
    },
}

我还用正确的应用名称替换了new-app，但它仍然不起作用。

文件夹结构：

谁能帮我解决这个问题？

【问题讨论】：

通常，您一次只能调试一个 Angular 应用程序。您的设置有什么独特之处是您无法做到的？
@theMayer 我不明白您的意思：“通常，您一次只能调试一个 Angular 应用程序。”是的，我只想调试应用程序new-app（一次一个应用程序），但也有其他应用程序。
ng serve 默认在 localhost:4200 运行服务器。如果您尝试提供多个应用程序，那将是行不通的。因此，为您的应用程序提供服务，并配置您的 chrome 调试器插件以连接到 localhost:4200。然后不管你加载的是哪一个，源都会自动拉进来。
除非您通过符号链接在项目之间共享源，在这种情况下打开文件夹而不是工作区。在某些时候，理智会占上风；）
@theMayer “如果您尝试提供多个应用程序”我不会尝试，它一次只提供一个应用程序。在这种情况下，默认应用程序。 angular.io/guide/file-structure#multiple-projects

标签： angular google-chrome visual-studio-code vscode-debugger vscode-tasks

【解决方案1】：

我通过使用.scripts 命令找出sourceMapPathOverrides 属性的正确路径来完成这项工作。

    {
      "name": "Launch editor in Chrome against localhost (with sourcemaps)",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "/usr/bin/chromium-browser",
      "runtimeArgs": [
        "--disable-extensions"
      ],
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/projects/apps/editor/*",
          "webpack:///./src/*": "${webRoot}/projects/apps/editor/src/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*",
      },
  }

【讨论】：

【解决方案2】：

我在应用程序和库中使用 angular 10 工作区，但在我的库中设置断点时遇到问题。

我需要告诉“ng serve”包括供应商源地图...

在项目/“my-app”/架构师/“服务”/选项下的“angular.json”中添加一个“sourceMap”对象：

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            }
          },

ng build my-library
ng serve my-app

launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "my-app",
            "url": "http://localhost:4200", 
            "webRoot": "${workspaceFolder}/projects/my-app",
            "sourceMaps": true,
        }
    ]
}

【讨论】：

这个解决方案对我有用。我一直在网上寻找一些方法。这就是修复它的原因

【解决方案3】：

在我的情况下，使用 Angular 9 的多项目工作区（因此使用 Ivy 和 AOT）我必须将 webroot 设置为我捆绑脚本的位置（使用 *.js.map 文件）所以它是："webRoot": "${workspaceFolder}/MyWebProj/wwwroot" .

感谢.scripts 能够列出所有路径无效的文件。

所以在那之后我只需要简单地调整sourceMapPathOverrides 中的路径。路径应该相对于webroot。

{
    "name": "App Debug",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:50120/",
    "webRoot": "${workspaceFolder}/MyWebProj/wwwroot",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/../src/*",
        "webpack:///../CommonWeb/*": "${webRoot}/../../CommonWeb/*",
        "webpack:///../node_modules/*": "${webRoot}/../../node_modules/*"
    }
}

【讨论】：