angular - 如何使用自定义 webpack 构建器调试 Angular CLI 应用程序？

问题描述

我建立了一个仓库来暴露我的问题：https ://github.com/franklin626/custom_webpack_undebuggable

这个 Angular CLI 应用程序有一个自定义的 webpack 设置 ( webpack.config.js)。它还有一个.vscode/launch.json配置，可以在ng test（单元测试）或ng serve. 我可以为我的单元测试设置断点，但不能在运行时设置ng serve：

在 VS Code 的调试选项卡中，我运行“启动 Chrome”例程，然后运行“附加 localhost”。我在上放置一个断点other.component.ts:14，然后浏览到localhost:4200/othermodule以启动OtherModule包含OtherComponent.

我不能在任何一个上放置断点home.component.ts:13，即使它位于默认模块中。

VS Code 抱怨断点无法命中，并暗示源映射可能存在问题。我可以看到原始资源已加载到浏览器中。到底是怎么回事？

标签： angularwebpackvisual-studio-code

解决方案

您可以添加.vscode/tasks.json标签debug如下

它将开始构建，启动 chrome 调试并观察变化

任务.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "debug",
      "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."
          }
        }
      }
    },
  ]
}

并修改.vscode/launch.json为使用debug任务作为 preLaunchTask

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome debug",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "debug",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

也将包移动到 devDependencies

npm i -D @angular-builders/custom-webpack

拉取请求

https://github.com/franklin626/custom_webpack_undebuggable/pull/2

angular - 如何使用自定义 webpack 构建器调试 Angular CLI 应用程序？

问题描述

解决方案

推荐阅读