Se recomienda que evite depender de los módulos CommonJS en sus aplicaciones Angular. Dependiendo de los módulos de CommonJS, puede evitar que los empaquetadores y los minificadores optimicen su aplicación, lo que da como resultado tamaños de paquete más grandes. En cambio, se recomienda que use módulos ECMAScript en toda su aplicación. Aún así, no le importa el tamaño de su paquete,

Para deshabilitar estas advertencias, puede agregar el nombre del módulo allowedCommonJsDependencies en las opciones de compilación ubicadas en el archivo angular.json .

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

Fuente

intente reemplazar rxjs imports rxjs/internal/operators con rxjs/operators .

ex:

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

con

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

Cuando usa una dependencia que está empaquetada con CommonJS, puede resultar en aplicaciones más grandes y lentas

A partir de la versión 10, Angular ahora le advierte cuando su compilación incorpora uno de estos paquetes. Si ha comenzado a ver estas advertencias para sus dependencias, informe a su dependencia que preferiría un paquete de módulo ECMAScript (ESM).

Aquí hay una documentación oficial: configuración de dependencias de CommonJS

En su archivo angular.json , busque el objeto de compilación y agregue

PermitidoCommonJsDependencies

Como se muestra abajo -

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

Para la biblioteca RXJS, puede realizar los siguientes cambios.

Para importaciones como 'rxjs/internal/<anything>' y 'rxjs/index' , reemplácelo solo con 'rxjs' .

Para importaciones como 'rxjs/internal/operators' , reemplácelo con 'rxjs/operators' , que se menciona en la respuesta de @Janardhan Burle.

O reemplace solo rxjs

Otro caso de esto es el problema del que se advierte durante la compilación con el uso de BehaviorSubject de rxjs cuando se usa el siguiente estilo de importación:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Da como resultado el siguiente error:

Advertencia: my.service.ts depende de 'rxjs/BehaviorSubject'. Las dependencias de CommonJS o AMD pueden causar rescates de optimización.

Al importar desde el módulo raíz, la advertencia ya no está presente durante la compilación:

import { BehaviorSubject } from 'rxjs';

He variado un gran proyecto con importaciones en desuso 'rxjs' y creo este script para actualizar todas las importaciones en desuso

 $ python3.6 replace_imports.py PATH_TO_SRC_DIR

esta secuencia de comandos actualiza la importación como "rxjs\/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)" para importar { * } desde rxjs

también intente actualizar rxjs-compat

En mi caso (después de la actualización a TypeScript versión 3.9.7) flatMap está en desuso (de rxjs/operators ). Este es un alias para mergeMap , así que lo reemplacé:

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

para

import { mergeMap } from 'rxjs/operators';

Solo cambia la importación:

desde:

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

Para:

import { BehaviorSubject } from 'rxjs';

Tuve un problema similar (app.module.ts depende de 'ngx-google-places-autocomplete'), pero muchas respuestas no me ayudaron.

Entonces, si tiene x depende de y , simplemente agregue y en el archivo angular.json en "allowedCommonJsDependencies".