Angular 10 升级 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

Posted 2023-03-07

【中文标题】Angular 10 升级 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

【英文标题】：Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailouts

【发布时间】：2020-10-16 17:31:16

【问题描述】：

我正在尝试将我的 Angular 9 应用升级到 Angular 10 版本，但升级后收到以下警告

WARNING in calendar.reducer.ts depends on lodash/keys. CommonJS or AMD dependencies can cause optimization bailouts.

我已在angular.json 文件中添加以下行，但问题未解决

"allowedCommonJsDependencies": ["lodash"]

如何解决上述问题。

【参考方案1】：

npm 包 lodash 本身不是 ECMAScript 模块，因此会产生警告。 有多种方法可以解决此问题：

替换为 ES 模块化库（推荐）

一些库提供 ES 模块化构建。如果是lodash，您可以将其替换为lodash-es。

运行npm install --save lodash-es。

现在将来自lodash 的所有导入替换为lodash-es。

还要确保使用 ES import 语句导入库：

import  keys  from 'lodash-es';

将 CommonJS 依赖列入白名单

如果您的库没有可用的 ES 模块化构建，或者您出于某种原因不关心，您可以在 angular.json 文件中允许特定的 CommonJS 依赖项：

"architect": 
  "build": 
    "builder": "@angular-devkit/build-angular:browser",
    "options": 
      "allowedCommonJsDependencies": ["lodash"]
    
  

从 Angular CLI 版本 10.0.1 开始，您可以在 allowedCommonJsDependencies 中使用 glob。 这意味着如果你通过lodash，子路径（例如lodash/keys）也将被允许。

文档参考：https://angular.io/guide/build#configuring-commonjs-dependencies

【讨论】：

试过了，问题依然存在

是的，您需要安装lodash-es。我正在更新我的答案以使其更清楚

Property allowedCommonJsDependencies is not allowed.

@Cleancode 你把它放对了吗？ (architect - build - options) 更新了我的答案，现在应该更清楚放在哪里了。

@Basheer Kharoti 确保你把它放在 "architect": "build": "builder": "@angular-devkit/build-angular:browser", "options":