Angular 浏览器中缺少 12 个源映射

Question

我们最近升级到 Angular 12 并面临浏览器源映射丢失的问题，因此我们无法调试我们的组件文件，因为没有。谁能建议我缺少什么？

Answer 1

请补充： "sourceMap":true and "optimization":false under architect -> build-> options in your angular.json.

不要忘记以相反的方式为您的生产配置设置这些。

Answer 2

Angular 12 将默认的“ng build”更改为使用“production”配置。你想要“sourceMap”，所以尝试在你的angular.json中添加一个“开发”配置，就像这样

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

以“ng build -c development”为目标，或更改“ng serve”的默认配置，例如。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "development": {
      "browserTarget": "app:build:development"
    }
  },
  "defaultConfiguration": "development"
},

Answer 3

您可以运行以下命令来更新angular cli。希望它能解决问题。

ng update @angular/cli@latest —-from=11 —-migrate-only

Answer 4

在关注@colche answear 之后我仍然无法生成源映射，在发现一些缺点后，我得到了解决方案：

ng build --prod --source-map

您必须使用源映射进行构建。

Answer 5

如果您使用的是 Nx 工作区，则需要编辑 workspace.json 文件以将开发设置添加到 build:configurations，如下所示：

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

并像这样在 serve:configurations 下添加 development 并将 defaultConfiguration 设置为 development:

     "serve": {
      ...
      "configurations": {
        ...
        "development": {
          "browserTarget": "gt:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

这种方式服务将始终在开发模式下服务，构建将始终在生产模式下构建。

Angular 浏览器中缺少 12 个源映射

Angular 12 source map is missing in browser

angular

typescript

angular12