@angular-architects/native-federation-v4

The Angular adapter for Native Federation: the mental model of Module Federation, implemented on browser standards (ES modules and import maps) for Micro Frontends and plugin-based architectures.

📖 Documentation

[!NOTE] This is the v4 bridge package for Angular 20 and 21. Upgrading from v3? See the migration guide, or run ng update @angular-architects/native-federation-v4. The v3 source lives in the module-federation-plugin repository.

Features

• Stays on the Angular CLI — delegates to Angular's esbuild-based ApplicationBuilder and dev server, so you keep every CLI optimisation.
• Web standards — remotes are plain ES modules wired together by an import map.
• Shared dependencies — load a library once across host and remotes, with semver-aware version negotiation.
• Schematics — ng add turns a project into a host or remote; ng update migrates it.
• SSR, Incremental Hydration and I18N — supported out of the box.

Versions

The adapter follows Angular's version numbers: use the adapter release that matches your Angular major and minor (e.g. 21.2.x for Angular 21.2.x).

@angular-architects/native-federation-v4 is a bridge package: it brings Native Federation v4 to projects still on Angular 20 or 21. Starting with Angular 22, v4 ships in the main @angular-architects/native-federation package again, so drop the -v4 suffix when you upgrade (ng update @angular-architects/native-federation does this for you).

Quick start

Install the adapter, then make one project a remote and another a host:

npm i @angular-architects/native-federation-v4 -D

ng g @angular-architects/native-federation-v4:init --project mfe1 --port 4201 --type remote
ng g @angular-architects/native-federation-v4:init --project shell --port 4200 --type dynamic-host

The schematic points angular.json at the federation builder, moves your bootstrap into bootstrap.ts and generates a federation.config.mjs:

import {
  withNativeFederation,
  fromPackageJson,
} from "@angular-architects/native-federation-v4/config";

export default withNativeFederation({
  name: "mfe1",
  exposes: {
    "./Component": "./projects/mfe1/src/app/app.component.ts",
  },
  shared: fromPackageJson({
    singleton: true,
    strictVersion: true,
    requiredVersion: "auto",
    build: "package",
  })
    // includeSecondaries is an opt-out of ignoreUnusedDeps, so every Angular
    // entrypoint is shared and builds can't publish different sets of them.
    .patch(["@angular/*"], { includeSecondaries: { keepAll: true } })
    .get(),
  skip: ["rxjs/ajax", "rxjs/fetch", "rxjs/testing", "rxjs/webSocket"],
  features: {
    denseChunking: true,
    denseExternals: true,
  },
});

Load the exposed component in the shell like any lazy route, then run ng serve mfe1 and ng serve shell. The Getting Started guide walks through every step, and the playground has runnable hosts, remotes and SSR examples.

Documentation

• Builder — the build/serve target and every option it accepts
• Schematics — init, appbuilder, remove and the Nx generator
• Angular config — withNativeFederation, fromPackageJson, shareAngularLocales, autoShareScope
• Runtime — initFederation, loadRemoteModule and dynamic remotes
• SSR & Hydration, I18N and Localization
• Custom builder — inject your own esbuild plugins
• Mental model and Native & Module Federation
• FAQ

Using an AI coding assistant? Point it at llms.txt.

Contributing

Issues and pull requests are welcome — see CONTRIBUTING.md.

Credits

Big thanks to Zack Jackson for originally coming up with Module Federation and its mental model, to the Angular CLI team, esp. Alan Agius and Charles Lyding, for the esbuild-based builder this adapter builds on, and to Florian Rappl and the Angular Architects team for their feedback and contributions. Find the current team behind native-federation on our documentation website.

License

MIT