Angular Academy · Lección

Cargar módulos remotos

Cargar microfrontends remotos dinámicamente

Cargar módulos remotos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Incorporación de un remoto durante el tiempo de ejecución

Una vez que un remoto expone un módulo y el host conoce su URL, el host lo carga bajo demanda con loadRemoteModule. Se trata de una importación dinámica mediante HTTP: nada del remoto se incluye en la compilación del host.

API de loadRemoteModule

loadRemoteModule recibe el nombre del remoto (del manifiesto) y la clave expuesta (de exposes del remoto). Devuelve una promesa que contiene ese módulo.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Carga diferida de rutas remotas

El patrón más claro consiste en exponer un archivo de rutas desde cada remoto y cargarlo de forma diferida en el enrutador del host con loadChildren, de modo que el remoto solo se cargue cuando se visite su ruta.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Carga de un componente individual

También puede exponer y cargar un componente standalone individual, lo que resulta útil para insertar un widget en lugar de un área de rutas completa.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Exposición en el lado remoto

Para que el host pueda cargarlo, el remoto debe incluir la exportación en su mapa exposes. La clave es lo que el host pasa a loadRemoteModule.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Resolución dinámica del manifiesto

Como el host lee el manifiesto al iniciarse, puede cambiar las URL de los remotos según el entorno (desarrollo, staging, producción) sin recompilar el host; basta con distribuir un archivo de manifiesto diferente.

Gestión de fallos de carga

Los remotos se cargan a través de la red y pueden fallar (por estar sin conexión o porque haya un despliegue en curso). Incluya la carga en un mecanismo de gestión de errores para que un solo remoto defectuoso no bloquee todo el shell.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Transferencia de datos entre límites

La comunicación entre el host y el remoto utiliza servicios singleton compartidos o el enrutador, no importaciones directas. Un servicio de autenticación compartido (singleton) permite que un remoto lea el usuario actual establecido por el host.

Versionado y contratos

La clave expuesta (por ejemplo, ./Routes) y su estructura forman un contrato. Cambiar la estructura de la exportación puede romper los hosts que la cargan, por lo que debe tratar los módulos expuestos como una API pública y versionarlos con cuidado.

Estrategias de precarga

Puede precargar un remoto de forma anticipada cuando la aplicación esté inactiva para que la navegación posterior sea instantánea, sin dejar de mantener ligera la carga inicial. Así se equilibra la velocidad de inicio con la velocidad de navegación percibida.

Flujo de extremo a extremo

Para recapitular la ruta de ejecución: el host lee el manifiesto, el usuario navega a una ruta federada, loadRemoteModule obtiene el remoteEntry.json del remoto, se reutilizan los singletons compartidos y las rutas o el componente del remoto se renderizan dentro del shell del host.

Comprobación rápida

¿Cómo carga un host una funcionalidad remota de forma diferida?

Recapitulación

Los hosts cargan los remotos en tiempo de ejecución mediante loadRemoteModule(name, key), normalmente dentro de loadChildren/loadComponent para las rutas de carga diferida. Los remotos deben expose la clave; el manifiesto resuelve las URL según el entorno. Gestione los errores de carga correctamente, comuníquese mediante singletons compartidos y trate los módulos expuestos como contratos versionados.

Preguntas frecuentes

¿La lección «Cargar módulos remotos» es gratis?

Sí — el texto completo de «Cargar módulos remotos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cargar módulos remotos»?

Cargar microfrontends remotos dinámicamente Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Cargar módulos remotos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy