Chrome 开发者工具中不可用的 Angular 12 调试源代码在 Angular 11 中正常

Question

我在两台不同的笔记本电脑上有 2 个类似的项目。第一个项目是用 Angular 11 编写的，并使用开发人员工具源选项卡中显示的 WebPack 云图标进行良好调试，以便我可以找到源代码并设置断点...

使用 Angular 12.0.1 编写的第二个项目不显示任何 WebPack 图标。我读过其他类似的问题，看起来 angular.json 具有所有正确的开发设置（例如 sourceMap true、optimization false、defaultConfigurationdevelopment...），但它看起来仍然像 Chrome 开发工具中的生产版本。

我还尝试过进行 ngserve --configurationdevelopment

但仍然没有运气。我是否缺少某些内容以便我可以调试 V12 项目？

Answer 1

我遇到了同样的问题，发现我必须将 sourceMap 和优化条目添加到开发配置中。

 "configurations": {
        "development":{
          "sourceMap": true,
          "optimization": false
        },
        "production": {

构建使用： ng build --configurationdevelopment

现在它对我有用。

Answer 2

当我们将 Angular 从 Angular 11 升级到以上版本时，就会出现这个问题。我们需要在 angular.json 文件中添加两个配置。

1. 建筑师 > 构建 > 配置 > 开发

2. 架构师>构建>服务>配置>开发

    "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb"
            }
          ]
        },
        "development": {
          "optimization": false,
          "sourceMap": true
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app-name:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "app-name:build:production"
        },
        "development": {
          "browserTarget": "app-name:build:development"
        }
      },
      "defaultConfiguration": "development"
    }
   

   }

Answer 3

将 Angular 11 应用程序更新到 Angular 12（然后更新到 13）后，我遇到了同样的问题。我用ng serve调试我的角度代码。

因此我必须添加

"development": {
  "browserTarget": "<App-Name>:build:development"
}

在 angular.json 中生产配置旁边的“serve”/“configurations”下。

现在我可以调试

ng serve --configuration development