DEV Community

Vipin Kumar R Jaiswar
Vipin Kumar R Jaiswar

Posted on

Module Federation Workspace - Anguler

#angular #architecture #frontend #modulefederation

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  |
    +-------------+      +-------------+   +-------------+
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Prerequisites

My development environment:

Angular CLI : 21.2.19
Node.js     : 22.23.1
npm         : 10.9.8
OS          : macOS (arm64)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Verify:

ng version
Enter fullscreen mode Exit fullscreen mode

Expected output:

Angular CLI: 21.x
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Move into the project:

cd housekeeping-mf
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Your project structure will look like this:

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

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
Enter fullscreen mode Exit fullscreen mode

Step 5: Configure Native Federation

Host 

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

Auth Remote 

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

User Remote 

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

Role Remote 

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

At this point, each project will contain:

federation.config.js
src/bootstrap.ts
Enter fullscreen mode Exit fullscreen mode

Step 6: Configure Routing

Update the host routes:

/auth
/users
/roles
Enter fullscreen mode Exit fullscreen mode

Each remote exposes:

./Routes
Enter fullscreen mode Exit fullscreen mode

Example:

exposes: {
  './Routes': './src/app/app.routes.ts'
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Successful output:

dist/host-app
dist/auth-app
dist/user-app
dist/role-app
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Affected projects:

host-app
auth-app
user-app
role-app
Enter fullscreen mode Exit fullscreen mode

After this change:

  • Builds succeed.
  • VS Code errors disappear.

Step 10: Run Everything

I created an npm script:

npm run start:all
Enter fullscreen mode Exit fullscreen mode

Running applications:

host-app
http://localhost:4200

auth-app
http://localhost:4201

user-app
http://localhost:4202

role-app
http://localhost:4203
Enter fullscreen mode Exit fullscreen mode

The Host application dynamically loads all three remotes.

Final Architecture 

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

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
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  1. Angular 21 works well with Native Federation.
  2. Use the same federation stack across all applications.
  3. Expose ./Routes instead of components for cleaner integration.
  4. Pin @angular-architects/native-federation to version 21.
  5. Add rootDir: "src" to avoid TypeScript diagnostics.
  6. 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!

Top comments (0)