Compartir dependencias

Si el host y tres remotos incluyen cada uno su propia copia de Angular en el bundle, el navegador descarga Angular cuatro veces y, lo que es peor, termina con varias instancias de Angular que rompen la inyección de dependencias. Compartir garantiza que se cargue una única copia una vez y que todos la reutilicen.

En federation.config.js, el objeto shared declara qué dependencias se comparten entre el host y los remotos. Native Federation elimina las duplicaciones durante el tiempo de ejecución.

shareAll() comparte todas las dependencias de package.json con una sola configuración, que es el punto de partida habitual. Después puede sobrescribir paquetes concretos.

singleton: true fuerza a que exista exactamente una instancia de un paquete en toda la aplicación. El núcleo de Angular, RxJS y el enrutador DEBEN ser singletons; dos copias de @angular/core implican dos árboles de inyectores y errores durante el tiempo de ejecución.

Cuando los remotos solicitan versiones diferentes, la federación elige una compatible. strictVersion: true genera un error si son incompatibles en lugar de cargar silenciosamente una versión no coincidente, lo que permite detectar los problemas pronto.

Una biblioteca compartida de sistema de diseño o autenticación también debería ser un singleton para que el estado (como el usuario actual) sea coherente. Compártala explícitamente por nombre.

requiredVersion: 'auto' lee la versión de package.json para que no tenga que escribirla manualmente. Así la configuración permanece sincronizada al actualizar las dependencias.

Cada compilación genera metadatos sobre sus paquetes compartidos. Durante la carga, la federación compara las versiones entre el host y los remotos y sirve un único módulo compartido mediante el mapa de importación, de modo que el navegador lo obtiene una sola vez.

Olvidar compartir Angular es el error clásico: la aplicación parece funcionar y después genera errores crípticos como «NG0203: inject() must be called from an injection context» porque existen dos copias de Angular. Compartirlo como singleton evita este problema.

Los despliegues independientes pueden quedar desalineados. Los equipos deben acordar un rango compartido para los paquetes del framework y actualizarse de forma coordinada, porque un host con Angular 18 no puede compartir de forma segura con un remoto que necesite Angular 17.

En ocasiones, un remoto necesita su propia copia aislada de una utilidad pequeña. Puede excluirla del uso compartido para incluirla de forma privada en su bundle, aceptando el tamaño duplicado a cambio de independencia.

¿Qué paquetes deben ser singletons?

Declare las dependencias shared (a menudo mediante shareAll) para que el host y los remotos carguen una sola copia. Configure el framework y las bibliotecas con estado (@angular/core, el enrutador, RxJS y su biblioteca de autenticación) con singleton: true; use strictVersion y requiredVersion: 'auto' para detectar desajustes. No compartir Angular provoca errores de DI.