【问题标题】:Angular 10 Upgrade - Fix CommonJS or AMD dependencies can cause optimization bailoutsAngular 10 升级 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助
【发布时间】: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"]

如何解决上述问题。

【问题讨论】:

    标签: javascript angular angular10 angular-upgrade


    【解决方案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": {}
    猜你喜欢
    • 2020-10-16
    • 1970-01-01
    • 2020-11-30
    • 1970-01-01
    • 2020-11-07
    • 2021-03-05
    • 1970-01-01
    • 1970-01-01
    • 2020-12-22
    相关资源
    最近更新 更多