Module Federation Workspace - Anguler

Vipin Kumar R Jaiswar — Thu, 23 Jul 2026 18:05:39 +0000

Angular 21 Module Federation: Build a Micro Frontend Workspace with One Host and Three Remotes

If you're exploring Micro Frontends with Angular 21, one of the first questions you'll encounter is:

"How do I set up a complete Module Federation workspace that actually works with Angular 21?"

After a few iterations (and a couple of version mismatches), I successfully created a housekeeping/admin platform using Angular 21 Native Federation with:

1 Host Application
3 Remote Applications
Shared routing
Native Federation (esbuild)
Single command startup

By the end of this tutorial, you'll have the following architecture running locally:

                    +----------------+
                    |    host-app    |
                    |   Port: 4200   |
                    +--------+-------+
                             |
           ---------------------------------------
           |                    |                |
           v                    v                v
    +-------------+      +-------------+   +-------------+
    |  auth-app   |      |  user-app   |   |  role-app   |
    | Port: 4201  |      | Port: 4202  |   | Port: 4203  |
    +-------------+      +-------------+   +-------------+

Project Overview

This sample project represents a basic housekeeping/admin platform.

Application	Purpose	Port
`host-app`	Shell, navigation, remote loading	4200
`auth-app`	Login, logout, access denied	4201
`user-app`	User management	4202
`role-app`	Role management	4203

Host Routes

/auth   -> auth-app
/users  -> user-app
/roles  -> role-app

Prerequisites

My development environment:

Angular CLI : 21.2.19
Node.js     : 22.23.1
npm         : 10.9.8
OS          : macOS (arm64)

Angular 21 works well with Native Federation. If you're starting fresh, I recommend pinning Angular CLI to version 21 to avoid compatibility issues.

Step 1: Install Angular CLI 21

npm i -g @angular/cli@21

Verify:

ng version

Expected output:

Angular CLI: 21.x

Step 2: Create an Empty Workspace

Instead of generating an application immediately, create an empty Angular workspace.

ng new housekeeping-mf \
--create-application false \
--routing \
--style css \
--skip-git

Move into the project:

cd housekeeping-mf

Step 3: Generate Applications

Generate one host and three remotes.

ng generate application host-app --routing --style css

ng generate application auth-app --routing --style css

ng generate application user-app --routing --style css

ng generate application role-app --routing --style css

Your project structure will look like this:

housekeeping-mf
│
├── projects
│   ├── host-app
│   ├── auth-app
│   ├── user-app
│   └── role-app
│
├── angular.json
└── package.json

Step 4: Install Module Federation Packages

Install Angular Architects packages compatible with Angular 21.

npm install --save-dev @angular-architects/module-federation@21

npm install --save-dev @angular-architects/native-federation@21

Step 5: Configure Native Federation

Host

ng add @angular-architects/native-federation \
--project host-app \
--port 4200 \
--type host \
--skip-confirmation

Auth Remote

ng add @angular-architects/native-federation \
--project auth-app \
--port 4201 \
--type remote \
--skip-confirmation

User Remote

ng add @angular-architects/native-federation \
--project user-app \
--port 4202 \
--type remote \
--skip-confirmation

Role Remote

ng add @angular-architects/native-federation \
--project role-app \
--port 4203 \
--type remote \
--skip-confirmation

At this point, each project will contain:

federation.config.js
src/bootstrap.ts

Step 6: Configure Routing

Update the host routes:

/auth
/users
/roles

Each remote exposes:

./Routes

Example:

exposes: {
  './Routes': './src/app/app.routes.ts'
}

This allows the host to lazy load the remotes.

Step 7: Build Everything

Build all applications.

ng build host-app

ng build auth-app

ng build user-app

ng build role-app

Successful output:

dist/host-app
dist/auth-app
dist/user-app
dist/role-app

Step 8: Fix Angular 21 Gotcha

One issue I encountered was:

The generated Native Federation dependency was initially installed with version 19.x.

Fix:

npm install --save-dev @angular-architects/native-federation@21

Without this upgrade, the build failed due to version incompatibilities.

This is currently the biggest "gotcha" when setting up Angular 21 Native Federation.

Step 9: Fix TypeScript Diagnostics

VS Code reported rootDir diagnostics.

Add the following to every application's tsconfig.app.json:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

Affected projects:

host-app
auth-app
user-app
role-app

After this change:

Builds succeed.
VS Code errors disappear.

Step 10: Run Everything

I created an npm script:

npm run start:all

Running applications:

host-app
http://localhost:4200

auth-app
http://localhost:4201

user-app
http://localhost:4202

role-app
http://localhost:4203

The Host application dynamically loads all three remotes.

Final Architecture

Host Application (4200)
│
├── /auth
│      └── auth-app
│
├── /users
│      └── user-app
│
└── /roles
       └── role-app

Complete Setup Commands

npm i -g @angular/cli@21

ng new housekeeping-mf --create-application false --routing --style css --skip-git

cd housekeeping-mf

ng generate application host-app --routing --style css
ng generate application auth-app --routing --style css
ng generate application user-app --routing --style css
ng generate application role-app --routing --style css

npm install --save-dev @angular-architects/module-federation@21
npm install --save-dev @angular-architects/native-federation@21

ng add @angular-architects/native-federation --project host-app --port 4200 --type host --skip-confirmation
ng add @angular-architects/native-federation --project auth-app --port 4201 --type remote --skip-confirmation
ng add @angular-architects/native-federation --project user-app --port 4202 --type remote --skip-confirmation
ng add @angular-architects/native-federation --project role-app --port 4203 --type remote --skip-confirmation

Key Takeaways

Angular 21 works well with Native Federation.
Use the same federation stack across all applications.
Expose ./Routes instead of components for cleaner integration.
Pin @angular-architects/native-federation to version 21.
Add rootDir: "src" to avoid TypeScript diagnostics.
Create a start:all script to improve the developer experience.

Micro Frontends are no longer an enterprise-only pattern. With Angular 21 and Native Federation, setting up a scalable frontend architecture has become significantly easier.

Happy coding!

DEV Community: Vipin Kumar R Jaiswar