.png)
Una sola copia para gobernarlas a todas: cómo compartir librerías de terceros en micro frontends de Nx con Angular
Al construir micro frontends con Angular, uno de los mayores retos es controlar las librerías de terceros. Frameworks como @angular/core, kits de UI como @angular/material, herramientas de estado como @ngrx/store y utilidades como lodash suelen repetirse en múltiples MFEs. Si no se comparten correctamente, cada aplicación empaqueta su propia copia, lo que engorda los bundles y complica la gestión de dependencias.
El problema
Imagina tres MFEs: Dashboard, Reports y Admin. Cada uno depende de: @angular/core, @ngrx/store y lodash. Si cada app incluye sus propias versiones, te expones a dependencias duplicadas que inflan el tamaño, conflictos de versión si no hay alineación y dolores de cabeza al depurar por comportamientos distintos entre librerías.
La solución: librerías compartidas como singletons
Nx junto a Webpack Module Federation permite declarar librerías compartidas como singletons en la configuración de webpack. A nivel conceptual, en la sección shared defines qué paquetes se comparten y cómo. Para @angular/core, @angular/common, @angular/router, @ngrx/store o lodash puedes activar estas opciones clave: singleton activado para garantizar una única instancia en todos los MFEs, strictVersion activado para forzar exactamente la misma versión y evitar bugs sutiles en tiempo de ejecución, requiredVersion con el número esperado por ejemplo 17.0.0 para tener control fino sobre las actualizaciones.
Qué significan estas opciones
• singleton true asegura que solo exista una instancia de la librería en toda la federación de MFEs. • strictVersion true obliga a que todas las apps usen la misma versión, reduciendo incompatibilidades. • requiredVersion x.y.z fija la versión requerida para mantener coherencia y prever cambios.
Ventajas de compartir librerías
1. Consistencia entre MFEs: cada micro frontend usa la misma versión de Angular, NgRx o lodash, evitando sorpresas de funciona en uno y falla en otro. 2. Mantenimiento más simple: actualizas librerías de terceros en un punto central y los equipos no tienen que alinear versiones manualmente. 3. Menos complejidad: al compartir singletons evitas múltiples inyectores de Angular o stores de NgRx en conflicto. 4. Mejor experiencia de desarrollo: con Nx defines las librerías una vez y las reutilizas en todo el monorepo, acelerando el setup y reduciendo errores.
Buenas prácticas para un setup robusto
• Centraliza la política de versiones en el host o en un paquete compartido para que todos los remotes hereden la configuración. • Mantén sincronizados los peerDependencies en el repositorio para evitar desalineaciones. • Comparte solo lo necesario y evita exponer librerías internas que puedan cambiar con frecuencia. • Automatiza checks de versiones en CI para detectar divergencias antes del despliegue. • Considera prefetching y caching del runtime federado para optimizar el performance en producción.
Cómo encaja Q2BSTUDIO
En Q2BSTUDIO diseñamos e implementamos arquitecturas de micro frontends con enfoque en rendimiento, seguridad y escalabilidad, integrando prácticas de ciberseguridad, automatización y observabilidad desde el primer día. Somos especialistas en aplicaciones a medida y software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de soluciones de ia para empresas con agentes IA productivos.
Si estás modernizando tu front web o migrando a Nx con Module Federation, nuestro equipo puede ayudarte a crear una base sólida y a compartir librerías de terceros como singletons para reducir tamaño de bundle, acelerar despliegues y estandarizar tu stack. Conoce cómo abordamos proyectos de desarrollo multiplataforma en nuestra página de software a medida y aplicaciones a medida y cómo operamos estos entornos en la nube con servicios cloud aws y azure.
Conclusión
Configurar librerías de terceros como singletons compartidos en Nx convierte tus micro frontends en un sistema coherente, mantenible y fiable. En lugar de gestionar múltiples versiones de Angular o duplicar dependencias, tus MFEs se comportan como piezas de un mismo producto, con menos fricción, menos riesgos y más velocidad de entrega. Si quieres llevar tu arquitectura al siguiente nivel, Q2BSTUDIO puede acompañarte de extremo a extremo, desde el diseño hasta la operación, incorporando prácticas de inteligencia artificial, ciberseguridad y analítica avanzada con power bi para generar valor real en tu negocio.
