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
./Routesinstead of components for cleaner integration. - Pin
@angular-architects/native-federationto version21. - Add
rootDir: "src"to avoid TypeScript diagnostics. - Create a
start:allscript 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!
SOCIAL SHARE CARD GENERATOR