Upgrading to Angular 10 - Fix CommonJS or AMD dependencies can cause optimization bailouts

问题

I am trying to upgrade my angular 9 app to angular 10 version, but getting below warning after the upgrade

rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject

Any idea how to fix this?

Thanks in advance!

回答1:

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications

Starting with version 10, Angular now warns you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

Here is an official documentation - Configuring CommonJS dependencies

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "rxjs-compat"
     ]
     ...
   }
   ...
},

回答2:

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application.Still you don't care about your bundling size,

To disable these warnings, you can add the CommonJS module name to allowedCommonJsDependencies option in the build options located in angular.json file.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "rxjs-compat"
     ]
     ...
   }
   ...
},

回答3:

try replacing the rxjs imports rxjs/internal/operators with rxjs/operators.

ex:

import { catchError, retry } from 'rxjs/internal/operators';

with

import { catchError, retry } from 'rxjs/operators';

来源：https://stackoverflow.com/questions/62592903/upgrading-to-angular-10-fix-commonjs-or-amd-dependencies-can-cause-optimizatio