Angular Academy · Lesson

Native Federation for Angular

Configure module federation in Angular.

Lesson 2 of 413 steps

Native Federation for Angular is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Native Federation for Angular” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Native Federation for Angular”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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