Native Federation

Native Federation es una librería de la comunidad que implementa el modelo de Module Federation con estándares del navegador, ES modules e import maps, sin depender de webpack.

Native Federation es un proyecto open source del equipo de angular-architects. Lleva el modelo de Module Federation a herramientas de build distintas de webpack. Los conceptos son los mismos: host, remotos, módulos expuestos y dependencias compartidas. La implementación se apoya en estándares del navegador, en concreto ES modules e import maps. Por eso funciona con el builder de Angular basado en esbuild y no queda atada a un bundler.

En el build, cada aplicación genera un archivo remoteEntry.json que describe qué expone y qué librerías comparte. En tiempo de ejecución, el host lee esos archivos, arma un import map y carga los remotos con un import() dinámico normal.

Ejemplo

El host inicializa la federación antes de hacer bootstrap:

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

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

Luego una ruta del host carga un remoto:

{
  path: 'orders',
  loadChildren: () =>
    loadRemoteModule('orders', './routes').then(m => m.ORDERS_ROUTES),
}

Confusión frecuente

El nombre sugiere una función del navegador o una parte de Angular. Es una librería de la comunidad, y "native" se refiere a la carga nativa de ES modules sobre la que se construye.

Pasar desde Module Federation con webpack también requiere trabajo. La configuración se parece, pero las librerías compartidas tienen que estar disponibles como ES modules, y los paquetes CommonJS antiguos pueden necesitar un tratamiento adicional. Conviene probar cada dependencia compartida antes de comprometer una fecha. La página de microfrontends muestra dónde encaja esta decisión en el diseño de una plataforma.

Términos relacionados

• Module Federation
• Import maps
• Remote entry y manifiesto