Native Federation

Native Federation is a community library that implements the Module Federation model with browser standards, ES modules and import maps, so it works independently of webpack.

Native Federation is an open source project from the angular-architects team. It brings the Module Federation model to build tools other than webpack. The concepts stay the same: host, remotes, exposed modules and shared dependencies. The implementation relies on browser standards, namely ES modules and import maps. Because of that, it works with the esbuild-based Angular builder and is not tied to one bundler.

At build time, each application produces a remoteEntry.json file that describes what it exposes and which libraries it shares. At runtime, the host reads those files, builds an import map and loads remotes with a regular dynamic import().

Example

The host initializes federation before it bootstraps:

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

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

A route in the host then loads a remote:

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

Common misunderstanding

The name suggests a browser feature or a part of Angular itself. It is a community library, and "native" refers to the native ES module loading it builds on.

Moving from webpack Module Federation also takes some work. The configuration looks similar, yet shared libraries have to be available as ES modules, and older CommonJS packages may need extra handling. Plan a test pass over every shared dependency before you commit to a date. The micro-frontends page shows where this choice sits in a platform design.

Related terms

• Module Federation
• Import maps
• Remote entry and manifest