在 Chrome / VS Code 中调试延迟加载的 Angular 2 模块答案

【问题标题】：Debug lazy loaded Angular 2 module in Chrome / VS Code在 Chrome / VS Code 中调试延迟加载的 Angular 2 模块
【发布时间】：2017-09-11 19:56:27
【问题描述】：

我正在使用带有 Angular 2/4 的 WebPack，并且正在使用延迟加载的模块。因此，这些模块和组件不包含在主 .js 文件中，代码驻留在 WebPack 生成的文件之一中：0.js、1.js 等等。

我的问题是 Chrome 和 VS Code 都不能出于某种原因调试这些文件中的代码。当我将代码包含到主 .js 文件中时，调试工作正常。有什么我可以做的吗？

示例：

我有一个在 HTML 元素中显示本地时间的小指令。我在延迟加载的组件中使用此指令。当我尝试调试指令（或任何其他延迟加载的内容）时，VS Code 会显示以下内容：

在 Chrome 中也无法进行调试。但是，如果我在根组件（或其他任何非延迟加载的组件）中使用该指令，则断点在 VS Code 和 Chrome 中都有效。

我追踪到 WebPack 为主客户端生成的文件和延迟加载的部分。每块延迟加载的组件都位于名为0.js、1.js 等的文件中——我认为这可能是导致问题的原因。

地图文件

相应地生成用于调试的地图文件，这是我的输出：

【问题讨论】：

什么意思？创建一个 gif
我编辑了我的帖子，希望您现在可以更好地了解我的问题。

标签： angular webpack lazy-loading

【解决方案1】：

我遇到了同样的问题。除了延迟加载的模块之外，在我的所有文件/模块中使用 VSCode 调试在 Angular 中命中了断点。

有两个问题需要解决： 1) 最新的 Angular CLI 中断了调试 - 这可以通过更新您的 launch.json 来修复 - 添加以下内容：

"sourceMapPathOverrides": {
     "webpack:/*": "${webRoot}/*"
}

2) 将debugger; 命令添加到您尝试调试的延迟加载文件中的某些部分代码 - 一旦debugger; 行被命中，所有断点将开始为延迟加载模块工作

如果您的断点已经在工作，则可以忽略第一步。第二步是一种解决方法，但应该让断点工作，我们可以弄清楚如何正确解决这个问题！

【讨论】：

注意：查看 GitHub 上最新的 VSCode 调试食谱 - 这些随着每个版本的发布而变化

【解决方案2】：

看起来 *.js.map 文件没有创建。

如果您使用 angular CLI 并触发 ng build --prod，它将为生产而构建，如果您运行 ng build --dev 然后它会生成 *.js.map 文件。

如果生成了 *.js.map 文件，那么你就可以调试你的 js 代码了。

【讨论】：

地图文件已生成，我更新了我的帖子并添加了输出截图。

【解决方案3】：

在 Angular-12 中使用 VS-Code 进行调试 - 将这两个文件（launch.json 和 task.json）添加到 .vscode 文件夹中。 vscode调试快捷键Shift+Ctrl+D

**launch.json**
{
"version": "0.2.0",
"configurations": [
  // Based on: https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI
  {
    "name": "Launch ng serve & Chrome",
    "type": "pwa-chrome",
    "request": "launch",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200/",

    // Note: The ./client directory
    "webRoot": "${workspaceFolder}",
    
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "*",
      "/./~/*": "${webRoot}/node_modules/*"
    }
  },
]}  


**tasks.json**
{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "start",
        "isBackground": true,
        "presentation": {
          "focus": true,
          "panel": "dedicated"
        },
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "problemMatcher": {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": [
            "relative",
            "${cwd}"
          ],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "Compiled |Failed to compile."
            }
          }
        },
  
        "options": {
          // Note: The ./client directory
          "cwd": "${workspaceFolder}"
        },
  
      },
    ]
  }

【讨论】：