Angular 11 - ng serve - "sourceMap"选项已过时

Question

我将 Angular 项目从 Angular 10 更新到 11x，一切正常，除了在使用 ng serve（不带任何选项）运行项目时出现一个警告。该警告为：

选项“sourceMap”已弃用：请改用浏览器构建器中的“sourceMap”选项。

该警告在 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"
            ],

Angular 11中与此相关的内容发生了变化？如何去除此警告？

- viking

---

你的 angular.json 文件中的 "serve" 部分是什么？ - HTN

我实际上尝试了您发布的配置，但我没有收到相同的警告。我认为这并不相关。 - misha130

@HTN，这是我 angular.json 中的 "serve" 部分： "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "my-app:build", "sourceMap": { "scripts": true, "styles": true, "vendor": true } }, "configurations": { "production": { "browserTarget": "easyproduction-web:build:production" } } }, - viking

我不理解这个问题。警告显示：“选项“sourceMap”已弃用”。在您的serve配置中，您有"sourceMap": { "scripts": true, "styles": true, "vendor": true } }。这个警告到底是什么意思不清楚？ - user15388024

Answer 1

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

- MichaelRRMoore

---

在“serve”部分中，它已过时：https://angular.io/cli/serve#options - viking

是的，我们同意。只是想指出，这并不意味着您不能在ng serve中打开或关闭源映射，只要将其放在正确的构建部分即可。只是想澄清一下，以防有其他像我一样没有理解的人。 - MichaelRRMoore

刚刚从Angular 12升级到Angular13，之前用的是命令ng serve --source-map=true --prod=false --watch=true，但现在显示--source-map是一个“未知选项”。我必须使用ng serve，因为我们的系统需要在本地运行HTTPS / SSL。但现在没有源映射了？有任何想法吗？ - Russ

Answer 2

根据以前的评论，这是一个可用的配置：

在angular.json中，将此配置添加到projects.[YOUR_PROJECT_NAME].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",
  ...

你应该在你喜欢的浏览器中检索源代码映射文件！

- Thibault

---

应该接受这个答案。 - Stephane

非常感谢！这也帮助我解决了问题，从Angular 10迁移到Angular 13。 - mar10

这篇回答帮助了我。在architect.build.configurations.dev部分，我添加了更多的属性来解决我的问题。 - Esaith

Answer 3

您需要从serve --> options --> sourceMap中删除sourceMap，因为它已被弃用。

- HTN

---

正如所指出的，现在已经弃用了sourceMap的使用：https://angular.io/cli/serve#options - viking

我在服务器配置中没有这个标志，但突然之间（更新后）调试停止工作了。我发现不再生成sourceMaps。将此弃用的标志放入解决了问题。默认的sourceMap配置有什么变化？ - Liphtier

Answer 4

使用 Angular15，您需要在angular.json文件的以下位置设置sourceMap和类似的设置：

architect -> build -> configurations -> development

然后您可以通过serve加载此配置，使用开发环境下的browserTarget设置它在：

architect -> serve -> configurations -> development

angular.json示例：

    {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              ...
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "ng-app-15:build:production"
            },
            "development": {
              "browserTarget": "ng-app-15:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        ...
      }
    }

然后，您可以运行以下命令来正确使用 sourceMap 并有可能使用 debugger 的 ng serve。

ng serve --configuration=developmentstrong text

注意：如果此答案因某种原因过期，您可以始终安装最新版本的 Angular 并运行 "ng new app"，默认情况下它会显示正确的 angular.json 配置，以正确使用 sourceMap 和类似的设置。

- Stefano Borzì