mf-tutorial

Angular 22 Native Federation v4 demo — a shell host that loads an mfe1 remote at runtime with shared dependencies.

This workspace follows the Native Federation v4 tutorial and includes the Angular 22 fixes needed to run it (expose app.ts, no ng serve -o, shell routes and placeholder pages). A full corrected walkthrough is in docs/native-federation-v4-tutorial.md.

Apps

App	Role	Port	URL
mfe1	Remote (exposes ./Component)	4201	http://localhost:4201
shell	Dynamic host	4200	http://localhost:4200

The shell lazy-loads the remote on /flights via loadRemoteModule. Shared Angular packages are reconciled at runtime by the Orchestrator.

Prerequisites

• Node.js LTS
• npm (this repo uses packageManager: npm 10.9.8)

Setup

npm install

Run

Start the remote first, then the host. Native Federation’s serve builder does not support -o / --open.

ng serve mfe1

Open http://localhost:4201 when it is ready.

In a second terminal:

ng serve shell

Open http://localhost:4200, then go to http://localhost:4200/flights to load mfe1 into the shell.

Build

ng build mfe1
ng build shell

Output is written to dist/.

Test

ng test mfe1
ng test shell

Project layout

projects/
  mfe1/                 # remote
    federation.config.mjs
    src/app/app.ts      # exposed as ./Component (also re-exported as AppComponent)
  shell/                # host
    federation.config.mjs
    public/federation.manifest.json
    src/app/app.routes.ts
docs/
  native-federation-v4-tutorial.md

projects/shell/public/federation.manifest.json maps the remote name to its entry:

{
  "mfe1": "http://localhost:4201/remoteEntry.json"
}

Docs

• Corrected local tutorial: docs/native-federation-v4-tutorial.md
• Official tutorial: https://native-federation.com/docs/v4/tutorial/