[解決済み] Angular 10 アップグレード - CommonJSやAMDの依存関係を修正し、最適化の失敗を防ぐ

質問

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"]

どうすれば上記の問題を解決できますか？

どのように解決するのですか？

npmパッケージの lodash 自体は ECMAScript モジュールではないので、警告が発生します。 これを修正する方法は複数あります。

ESモジュール化されたライブラリに置き換える(推奨)

一部のライブラリは、ESモジュラライズドビルドを提供しています。の場合は lodash の場合、これを ロダッシュエス .

実行 npm install --save lodash-es .

のimportを全て置き換えます。 lodash を lodash-es .

また、ESのimport文でライブラリをインポートするようにします。

import { keys } from 'lodash-es';

ホワイトリスト CommonJSの依存関係

もし、あなたのライブラリにESモジュラービルドがない場合、あるいは、何らかの理由で気にしない場合、特定のCommonJSの依存性を angular.json ファイルで特定のCommonJS依存を許可することができます。

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

Angular CLI Version 10.0.1以降では、globは allowedCommonJsDependencies . これは、もしあなたが lodash を渡すと、サブパス(例えば lodash/keys など) も許可されます。

Docs参照。 https://angular.io/guide/build#configuring-commonjs-dependencies