Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.3K
Visualizações
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?

over 4 years ago · Santiago Trujillo
9 Respostas
Responde à pergunta

0

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"
     ]
     ...
   }
   ...
},

Source

over 4 years ago · Santiago Trujillo Relatório

0

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

In your angular.json file look for the build object and add

allowedCommonJsDependencies

as shown below -

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "rxjs-compat",
         ... few more commonjs dependencies ... 
     ]
     ...
   }
   ...
},
over 4 years ago · Santiago Trujillo Relatório

0

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';
over 4 years ago · Santiago Trujillo Relatório

0

For RXJS library you can do following changes.

For imports such as 'rxjs/internal/<anything>' and 'rxjs/index', replace it with just 'rxjs'.

For imports such as 'rxjs/internal/operators', replace it with 'rxjs/operators', which is mentioned in @Janardhan Burle's answer.

Or replace just rxjs

over 4 years ago · Santiago Trujillo Relatório

0

Another case of this is problem being warned about during the build is with the use of BehaviorSubject from rxjs when using the following style of imports:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

It results in the following error:

Warning: my.service.ts depends on 'rxjs/BehaviorSubject'. CommonJS or AMD dependencies can cause optimization bailouts.

By importing from the root module instead, the warning is no longer present during the build:

import { BehaviorSubject } from 'rxjs';

over 4 years ago · Santiago Trujillo Relatório

0

I had similar issue (app.module.ts depends on 'ngx-google-places-autocomplete'), but many answers did not helped me.

So if you have x depends on y, just add y in angular.json file in "allowedCommonJsDependencies".

over 4 years ago · Santiago Trujillo Relatório

0

I has vary big project with deprecated imports 'rxjs' and create this script for upgrade all deprecated imports

$ python3.6 replace_imports.py PATH_TO_SRC_DIR 

this script upgrade import like "rxjs\/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)" to import { * } from rxjs

also try upgrade rxjs-compat

over 4 years ago · Santiago Trujillo Relatório

0

In my case (after update to TypeScript version 3.9.7) flatMap is deprecated (from rxjs/operators). This is alias for mergeMap, so just I replaced:

import { flatMap } from 'rxjs/internal/operators';

to

import { mergeMap } from 'rxjs/operators';

over 4 years ago · Santiago Trujillo Relatório

0

Just change the import:

from:

import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

To:

import { BehaviorSubject } from 'rxjs';

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda