Angular 10 Upgrade - La correction des dépendances CommonJS ou AMD peut entraîner des abandons d'optimisation

Question

Je suis en train de mettre à niveau mon application Angular 9 vers la version Angular 10, mais je reçois l'avertissement suivant après la mise à niveau

AVERTISSEMENT dans calendar.reducer.ts dépend de lodash/keys. Les dépendances CommonJS ou AMD peuvent entraîner des annulations d'optimisation.

J'ai ajouté la ligne suivante à mon fichier angular.json mais le problème n'est pas résolu

"allowedCommonJsDependencies": ["lodash"]

Comment puis-je résoudre le problème ci-dessus.

Answer 1

Le package npm lodash en lui-même n'est pas un module ECMAScript et génère donc l'avertissement. Il existe plusieurs façons de résoudre ce problème :

Remplacer par une bibliothèque modulaire ES (recommandé)

Certaines bibliothèques proposent des versions modulaires ES. Dans le cas de lodash, vous pouvez le remplacer par lodash-es.

Exécutez npm install --save lodash-es.

Remplacez maintenant toutes les importations de lodash par lodash-es.

Assurez-vous également d'importer la bibliothèque avec des instructions d'importation ES :

import { keys } from 'lodash-es';

Autoriser les dépendances CommonJS

S'il n'existe pas de version modulaire ES pour votre bibliothèque, ou si pour une raison quelconque cela ne vous importe pas, vous pouvez autoriser des dépendances CommonJS spécifiques dans le fichier angular.json :

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

Depuis la version 10.0.1 d'Angular CLI, vous pouvez utiliser des globs dans allowedCommonJsDependencies. Cela signifie que si vous passez lodash, les sous-chemins (par exemple lodash/keys) seront également autorisés.

Référence aux docs : https://angular.io/guide/build#configuring-commonjs-dependencies