Angular Academy · Lección

Federación nativa para Angular

Configurar la federación de módulos en Angular

Federación nativa para Angular es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.

Por qué Native Federation

El Module Federation clásico estaba ligado a webpack. El sistema de compilación de Angular pasó a esbuild, por lo que la comunidad creó Native Federation: una implementación de la misma idea independiente de la herramienta de compilación y basada en estándares web (mapas de importación y módulos ES).

El paquete

Native Federation para Angular se encuentra en @angular-architects/native-federation. Añádalo mediante el esquema de la CLI de Angular, que configura la configuración y el proceso de compilación.

ng add @angular-architects/native-federation

Inicialización de un host

Ejecute el esquema en la aplicación shell y seleccione dynamic-host. Esto genera un federation.config.js y actualiza el arranque para inicializar la federación antes de que se inicie Angular.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Inicialización de un remoto

Para una aplicación funcional, ejecute la misma inicialización con remote. Esto crea la configuración que expone partes del remoto a los hosts.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

El archivo federation.config.js

Esta configuración es el núcleo de la federación: asigna un nombre al remoto, enumera lo que exposes y declara las dependencias shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Cambios en el arranque

Native Federation requiere inicializarse antes del arranque para que los mapas de importación estén listos. El esquema divide main.ts en un paso de inicialización que carga bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Listado de remotos en el host

El host mantiene un manifiesto que asigna nombres de remotos a sus URL de remoteEntry.json, de modo que sabe dónde obtener cada remoto durante el tiempo de ejecución.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Carga del manifiesto

Pase la ruta del manifiesto a initFederation. El host lo lee una vez al iniciarse y después puede cargar bajo demanda cualquier remoto incluido en él.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Basado en estándares, no limitado a webpack

Como Native Federation usa módulos ES nativos y mapas de importación, funciona con esbuild, Vite u otros bundlers. Este desacoplamiento explica por qué se convirtió en el enfoque recomendado para Angular moderno.

Servidores de desarrollo por remoto

Durante el desarrollo, cada remoto se ejecuta en su propio puerto (ng serve --port 4201). El host apunta a esas URL mediante el manifiesto, por lo que puede ejecutar localmente toda la composición.

Qué ofrece Native Federation

En resumen: compilaciones independientes, singletons compartidos (una instancia de Angular), carga dinámica de remotos y ausencia de acoplamiento a un bundler específico. En las próximas lecciones se explicará detalladamente cómo compartir dependencias y cargar módulos remotos.

Comprobación rápida

¿Por qué elegir Native Federation en lugar del Module Federation clásico en Angular?

Resumen

Native Federation (@angular-architects/native-federation) incorpora la federación de módulos a Angular basado en esbuild mediante mapas de importación. Inicialice hosts y remotos con el esquema, configure exposes y shared en federation.config.js, llame a initFederation antes del arranque y enumere los remotos en un manifiesto.

Preguntas frecuentes

¿La lección «Federación nativa para Angular» es gratis?

Sí — el texto completo de «Federación nativa para Angular» 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 «Federación nativa para Angular»?

Configurar la federación de módulos en Angular 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 2 de 4.

¿Cuánto tiempo toma la lección «Federación nativa para Angular»?

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