在Angular 12中以开发模式构建

Question

Angular 12默认为生产模式，如何保持旧的开发模式？我们缺少源代码映射，并且默认情况下main.js也被压缩了，这很酷，但在开发者模式下没有帮助。 因此问题是如何返回旧的开发模式或生成源代码映射而不进行压缩。尝试更新angular.json中的配置但没有成功。

"optimization": {
  "scripts": false,
  "styles": {
    "minify": false,
    "inlineCritical": false
  },
  "fonts": false
},
"outputHashing": "none",
"sourceMap": true,
"extractCss": true,
    

- Amol Ghotankar

---

我也遇到了这个问题，无法找到 Angular 12 的开发模式。因为在生产模式下，浏览器中没有源映射，所以你无法进行调试。 - ammad khan

只需降级到Angular 11+，等待Ionic团队为Angular 12提供官方支持即可。 - Sampath

这是关于Angular 12源映射在浏览器中丢失的问题的答案。尝试一下，对我有效。 - ammad khan

Answer 1

我刚刚在构建/配置下添加了一个开发部分。

"development": {
          "optimization": false,
          "sourceMap": true,
          "namedChunks": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "buildOptimizer": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "6mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }

并在serve/configurations下：

 "development": {
          "browserTarget": "studio:build:development"
        }

然后要在移动设备上运行它（嵌入式Web服务器），请运行以下命令：

ng serve myapp --configuration development

此外，如果要在 Web 服务器上（如 NGinx）构建和运行开发版本，您可以运行以下命令：

ng build --configuration development

- tano

---

非常感谢！你真的节省了我的时间。但我仍然无法弄清楚为什么NG-12项目不能像另一个NG-11项目一样自动在开发模式下运行。尽管两者都有相同的angular.json文件。这太奇怪了。 - SHUMING LU

不客气！事情变了。为了防止意外的开发构建进入生产环境，他们将生产构建设置为默认值。由于服务器使用默认配置，这就导致了问题。 - tano

我正在将我的Angular版本升级到13，这对我起了作用！ - LatentDenis

这是答案。谢谢。 - pantonis

Answer 2

官方文档

--prod已弃用：请改用--configuration production。

当生成新项目时，ng build默认配置为production。

你有两个选择：

1. 使用以下命令构建：

ng build --configuration development

2. 在angular.json文件中将默认配置更改为开发环境

projects > {YOUR-PROJECT-NAME} > architect > build > defaultConfiguration

- Sameer

Answer 3

使用 Angular CLI v12.2.3 版本，

ng build --configuration development

对我来说不起作用。

所以我只能使用以下命令：

ng build --configuration="development"

- Pran Kumar Sarkar

---

谢谢，这对我有用！我使用的是Windows 10。也许它应该被接受为答案？ - benCat

Answer 4

问题在于你更新到最新版本时没有使用 ng update 命令，而是手动升级。

你可以尝试自己运行迁移命令：

ng update @angular/cli --migrate-only --from 11 --to 12

如果出现问题，请检查 angular.json 文件是否有更新。建议您使用 v12 创建一个新项目，并检查当前的 angular.json 和新版本之间的差异。

例如，在 .../architect.serve 路径下没有 "defaultConfiguration": "development" 条目。而对于 .../architect.build，该条目设置为 "production"。也许为您的项目添加这些条目已经足够了。

- Poul Kruijt

Answer 5

对我来说，在angular.json中一切都很好，但是在构建过程中被替换的environment.<uat>.ts文件中有一个production:true。

将uat更改为production:false

真是一件傻事。

- minigeek

---

感谢您的发布。在工作中的一个项目中也遇到了同样的错误。 - Frederik Claus

Answer 6

在Azure Pipeline中使用.net core发布步骤

如果您在使用Azure Pipeline进行.net core构建/发布时遇到此问题，则需要更改web.csproj文件中的发布步骤。

请替换以下内容：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

使用

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --configuration production" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

在代码片段的第2行和第3行中，您可以看到Command已从--prod更改为--configuration production。

- Christian Phillips

Answer 7

在我尝试从v11升级到v15时遇到了这个问题。

迁移过程中，angular.json的结构和配置没有更新。

按照以下步骤禁用缩小功能

1. 将“development”添加到architect>build>configurations
2. 将“development”添加到architect>serve>configurations
3. 将“defaultConfiguration”添加到architect>serve

运行ng serve

有关对angular.json的修改的详细信息，请参见

"architect": {
    "build": {
      ...,
      "configurations": {
        ...,
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      }
    },
    "serve": {
      ...
      "configurations": {
        ...
        "development": {
          "browserTarget": "myproject:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    ...
}

还需要将 "extract-i18n"、"test"、"lint" 和 "e2e" 移动到 "architect" 下面。

- joohong89