Micro-frontends Angular
Module federation, arquitectura de micro-frontends, dependencias compartidas, estrategias de despliegue, patrones de comunicación
1¿Qué es una arquitectura de micro-frontend en el contexto de Angular?
¿Qué es una arquitectura de micro-frontend en el contexto de Angular?
Respuesta
Una arquitectura de micro-frontend divide una aplicación Angular monolítica en aplicaciones independientes más pequeñas, cada una desarrollada y desplegada por separado. Cada micro-frontend puede tener su propio repository, pipeline CI/CD y equipo dedicado. Module Federation de Webpack 5 es la tecnología recomendada para implementar esta arquitectura en Angular, permitiendo cargar dinámicamente código desde otras aplicaciones en runtime.
2¿Cuál es el rol de Module Federation en una arquitectura de micro-frontend Angular?
¿Cuál es el rol de Module Federation en una arquitectura de micro-frontend Angular?
Respuesta
Module Federation permite compartir código entre aplicaciones Angular en runtime sin rebuild. Cada micro-frontend expone módulos (remotes) que pueden ser consumidos por otras aplicaciones (hosts). Esto evita la duplicación de código, reduce el tamaño de los bundles y permite despliegues independientes. Module Federation maneja automáticamente la carga asíncrona, la resolución de dependencias y el compartir bibliotecas comunes como Angular core.
3¿Cuál es la diferencia entre una aplicación host y una aplicación remote en Module Federation?
¿Cuál es la diferencia entre una aplicación host y una aplicación remote en Module Federation?
Respuesta
La aplicación host consume módulos expuestos por los remotes. Configura los remotes en su webpack.config y carga sus módulos dinámicamente. Una aplicación remote expone módulos (components, services) para ser consumidos por otras aplicaciones. Una misma aplicación puede ser tanto host como remote. El host controla el shell de la aplicación (header, navigation, layout) mientras que los remotes proporcionan las funcionalidades de negocio.
¿Cómo configurar Module Federation en un proyecto Angular con @angular-architects/module-federation?
¿Por qué es importante configurar el shared scope en Module Federation?
+17 preguntas de entrevista
Otros temas de entrevista Angular
Conceptos básicos de TypeScript
TypeScript Avanzado
Fundamentos de Angular
Componentes y ciclo de vida
Services & Dependency Injection
Organización de Módulos Angular
Angular CLI
Directivas y Pipes
Routing y Navegación
Formularios reactivos
Formularios template-driven
Fundamentos de RxJS
Operadores RxJS
HttpClient y llamadas API
Gestión de estado básica
Change Detection
Angular Signals
Standalone Components
Pruebas unitarias en Angular
Testing End-to-End
Build y optimización
Fundamentos de NgRx
NgRx avanzado
Arquitectura Angular
Optimización de rendimiento
Seguridad y buenas prácticas
Patrones avanzados de RxJS
Angular Universal y SSR
Domina Angular para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis