更新到 Angular 12 后 ng 服务期间的块文件问题答案

【问题标题】：Problem with Chunk Files durring ng serve after update to Angular 12更新到 Angular 12 后 ng 服务期间的块文件问题
【发布时间】：2021-10-22 08:24:05
【问题描述】：

还有其他人面临这个问题吗？更新到 Angular 12 后，我的应用程序的所有文件都在开发中被分块，运行 ng serve。

一旦所有文件都被压缩并且文件的名称是数字而不是真实的文件名，我现在无法在浏览器上调试。

有人知道如何解决这个问题吗？

enter image description here enter image description here

【问题讨论】：

在您的 angular.json 中，在开发构建设置中，会有很多选项。尝试对此进行研究和调整。
我会试试的，谢谢。

标签： angular chunking angular12

【解决方案1】：

在 Angular v12 中，默认启用生产构建。对于您的开发服务器，您需要禁用生产设置。确保您的 angular.json 设置如下：

{
  "projects": {
    "your-project-name": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              ...
            },
            ...
          }
        },
        ...
      }
    }
  }
}

【讨论】：

【解决方案2】：

Angular 12 需要额外的配置，以便在开发构建中并非所有文件都被压缩。在 angular.json 文件中添加架构师 -> 构建 -> 配置：

"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  },
  "production": {
    ...
  }
}

并在服务 -> 配置下：

"serve": {
  ...
  "configurations": {
    "production": {
      "browserTarget": "myapp:build:production"
    },
    "development": {
      "browserTarget": "myapp:build:development"
    }
  }
}

使用ng serve myapp --configuration development 运行应用程序。或者更改“ng serve”的默认配置，例如：

"serve": {
  ...
  "configurations": {
    ...
  },
  "defaultConfiguration": "development"
}

【讨论】：