Angular Academy · Lesson

Native Federation for Angular

Configure module federation in Angular.

Native Federation for Angular is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Native Federation

Classic Module Federation was tied to webpack. Angular's build system moved to esbuild, so the community created Native Federation: a build-tool-agnostic implementation of the same idea, built on web standards (import maps and ES modules).

The Package

Native Federation for Angular lives in @angular-architects/native-federation. You add it with the Angular CLI schematic, which wires up the config and build process.

ng add @angular-architects/native-federation

Initializing a Host

Run the schematic on the shell app and choose dynamic-host. It generates a federation.config.js and updates the bootstrap to initialize federation before Angular starts.

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

Initializing a Remote

For a feature app, run the same init with remote. This creates the config that exposes parts of the remote to hosts.

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

The federation.config.js

This config is the heart of federation: it names the remote, lists what it exposes, and declares shared dependencies.

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

Bootstrap Changes

Native Federation requires initializing before bootstrap so import maps are ready. The schematic splits main.ts into an init step that loads bootstrap.ts.

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

Listing Remotes in the Host

The host keeps a manifest mapping remote names to their remoteEntry.json URL, so it knows where to fetch each remote at runtime.

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

Loading the Manifest

Pass the manifest path to initFederation. The host reads it once at startup, then can load any listed remote on demand.

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

Standards-Based, Not webpack-Locked

Because Native Federation uses native ES modules and import maps, it works with esbuild, Vite, or other bundlers. This decoupling is why it became the recommended approach for modern Angular.

Dev Servers per Remote

During development each remote runs on its own port (ng serve --port 4201). The host points at those URLs through the manifest, so you can run the whole composition locally.

What Native Federation Gives You

In short: independent builds, shared singletons (one Angular instance), dynamic loading of remotes, and no coupling to a specific bundler. The next lessons cover sharing dependencies and loading remote modules in detail.

Quick Check

Why Native Federation over classic Module Federation in Angular?

Recap

Native Federation (@angular-architects/native-federation) brings module federation to esbuild-based Angular using import maps. Init hosts and remotes with the schematic, configure exposes and shared in federation.config.js, call initFederation before bootstrap, and list remotes in a manifest.

Frequently asked questions

Is the “Native Federation for Angular” lesson free?

Yes — the full text of “Native Federation for Angular” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Native Federation for Angular”?

Configure module federation in Angular. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Native Federation for Angular” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy