Question

在Angular 10更新之后，我收到有关Firebase和CommonJS或AMD依赖项的这些警告！

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.component.ts depends on 'firebase'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/app.module.ts depends on '@angular/common/locales/fr'. When using the 'localize' option this import is not needed. Did you mean to import '@angular/common/locales/global/fr'? For more info see: https://angular.io/guide/i18n#import-global-variants-of-the-locale-data

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/src/app/services/crud/crud.service.ts depends on 'lodash/dropRight'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js depends on 'firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/app'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/database'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/firestore'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/functions'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/performance'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /Users/knewtone/yet/projects/WorkSpace/customers/smart-newtech-dashboard/node_modules/firebase/dist/index.cjs.js depends on '@firebase/remote-config'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Answer 1

要摆脱这些警告，您可以在angular.json中指定以下选项：

"architect": {
        "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "allowedCommonJsDependencies": [
                            "lodash",
                            "firebase",
                            "@angular/common/locales/fr",
                            "lodash/dropRight",
                            "@firebase/app",
                            "firebase/app",
                            "@firebase/database",
                            "@firebase/firestore",
                            "@firebase/functions",
                            "@firebase/performance",
                            "@firebase/remote-config"
                        ],

我希望它能对您有所帮助。

Answer 2

当您使用CommonJS打包的依赖项时，它可能导致larger slower applications

从版本10开始，当您的构建引入这些捆绑软件之一时，Angular现在会警告您。如果您开始对依赖项看到这些警告，请让您的依赖项知道您更喜欢ECMAScript模块（ESM）捆绑包。

这是官方文档-Configuring CommonJS dependencies

您需要像这样更新angular.json：

    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "allowedCommonJsDependencies": [
        "firebase",
        "@firebase/app",
        "@firebase/database",
        "@firebase/firestore",
        "@firebase/functions",
        "@firebase/performance",
        "@firebase/remote-config",
        "@firebase/component",
        .... etc ...
     ]
     ...
    }
   ...
},

您可以在我以前的帖子中找到相同的答案-https://stackoverflow.com/a/62604034/6097025

Firebase CommonJS或AMD依赖项可能导致优化援助

2 个答案: