Angular 11 - ng serve - 选项 "sourceMap" 已弃用

Question

我将 Angular 项目从 Angular 10 更新到 11x。一切正常，除了在运行项目上使用 ng serve 的一个警告（在 ng serve 中没有任何选项）。警告是：

Option "sourceMap" is deprecated: Use the "sourceMap" option in the browser builder instead.

警告未在 ng build 中显示。

项目 angular.json 中的浏览器构建器部分如下所示：

"builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "sourceMap": true,
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Angular11 中有什么相关的变化吗？如何删除此警告？

Answer 1

您需要从 serve --> options --> sourceMap 中删除 sourceMap，后者已弃用。

Answer 2

我对一些答案感到困惑，这些选项并没有真正弃用，但现在应该在 angular.json 的正确 "build" 部分指定，而不是 "serve"。

Answer 3

根据之前的评论，这是一个工作配置：

在angular.json中，将此配置添加到 projects.[NAME_OF_YOUR_PROJECT].architect.serve.configurations :

"dev": {
  "browserTarget": "[NAME_OF_YOUR_PROJECT]:build:dev"
}

像这样:

...
"architect": {
  "serve": {
    ...
    "configurations": {
      "production": {
        ...
      },
      "dev": {
        "browserTarget": "[NAME_OF_YOUR_PROJECT]:build:dev"
      }
    }
  },
  ...

然后，在projects.[NAME_OF_YOUR_PROJECT].architect.build.configurations中添加对应的"dev"配置：

"dev": {
  "optimization": false,
  "sourceMap": true
}

喜欢这个例子:

...
"architect": {
  "build": {
    ...
    "configurations": {
      "production": {
        ...
      },
      "dev": {
        "optimization": false,
        "sourceMap": true
      }
    }
  },
...

现在您只需编辑 package.json 中的 "start" 脚本命令即可：

...
"scripts": {
  "start": "ng serve --configuration=dev",
  ...

并且您应该在您最喜欢的浏览器中检索源映射文件！

Angular 11 - ng serve - 选项 "sourceMap" 已弃用

Angular 11 - ng serve - Option "sourceMap" is deprecated

angular

angular-compiler-cli

angular-builder