为 Angular 12 构建开发模式答案

【问题标题】：Build in dev mode for Angular 12为 Angular 12 构建开发模式
【发布时间】：2021-09-10 13:15:41
【问题描述】：

Angular 12 带有默认的 prod 模式，我们如何保持旧的开发模式为 ON？我们缺少源映射，并且 main.js 默认也被缩小，这很酷，但在开发人员模式下没有帮助。

所以问题是如何回到旧的开发模式或生成源图而不是缩小。尝试更新 angular.json 中的配置，但没有成功。

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

【问题讨论】：

你试过 npm run dev 了吗？
我也面临这个问题，无法找到 Angular 12 的开发模式。因为您无法在 Prod 模式下调试，因为浏览器中不会有任何源映射。
只需降级到 Angular 11+ 并等待 Ionic 团队为 Angular 12 提供官方支持。
stackoverflow.com/questions/67647471/… 这是答案。试试看。它对我有用。

标签： angular

【解决方案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"
            }
          ]
        }

在服务/配置下：

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

我使用 ng serve myapp --configuration development 运行应用程序

【讨论】：

非常感谢！你真的节省了我的时间。但我仍然无法弄清楚为什么 NG-12 项目不能像另一个 NG-11 项目那样自动在开发模式下运行。虽然两者都有相同的 angular.json。太奇怪了。
不客气！事情会改变的。为了防止产品中的意外开发构建，他们将生产构建设置为默认值。由于服务使用默认配置，因此会导致问题。
我正在将我的 Angular 版本升级到 13，这对我有用！
这就是答案。谢谢

【解决方案2】：

From official docs

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

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

你有两个选择

使用构建

ng build --configuration development

在angular.json 文件中将默认配置更改为development

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

【讨论】：

【解决方案3】：

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

您可以尝试自己运行迁移：

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

如果由于某种原因这不起作用，angular.json 已经得到了相当多的更新。我建议您使用 v12 创建一个新项目，并检查您当前的 angular.json 和新项目之间有什么区别。

例如，.../architect.serve 路径内没有 "defaultConfiguration": "development" 条目。 .../architect.build 的位置设置为 "production"。也许为您的项目添加这些就足够了。

【讨论】：

【解决方案4】：

使用 Angular CLI v12.2.3，

ng build --configuration development

不适合我。

所以我不得不改用下面的命令：

ng build --configuration="development"

【讨论】：

谢谢，它对我有用！我在 Windows 10 上。也许这应该是公认的答案？