Angular21 Micro Frontend using Module Federation

Subodh AngularThink


Angular Micro Frontend using Module Federation 🚀

Complete Setup Step-by-Step | From Scratch (Angular 21)

Modern enterprise applications are becoming larger and more complex. To solve this problem, many organizations are adopting Micro Frontend architecture.

With Angular Micro Frontends using Module Federation, multiple teams can develop independent Angular applications and integrate them into a single platform.


Angular21 Micro Frontend using Module Federation


In this guide, we will learn how to implement Angular Micro Frontend architecture using Webpack Module Federation from scratch using the latest Angular 21.

What is Micro Frontend Architecture?

Micro Frontend is a design approach where a frontend application is divided into multiple smaller independent applications.

Each micro frontend can:

✔ Be developed by different teams
✔ Be deployed independently
✔ Use its own codebase
✔ Scale easily

This architecture is widely used by large companies like Netflix, Amazon, and Spotify.

What is Module Federation?

Module Federation is a feature of Webpack 5 that allows multiple applications to share code dynamically at runtime.

This means:

  • One application can expose modules

  • Another application can consume those modules

Example:

Host App
   |
   |----> Remote App 1
   |
   |----> Remote App 2

Angular Micro Frontend Architecture

Typical Angular Micro Frontend structure:

workspace
│
├── shell-app (Host)
│
├── products-app (Remote)
│
└── dashboard-app (Remote)

  • Shell App → Main application (Host)

  • Remote Apps → Independent micro applications

Step 1 — Create Angular Workspace

Install Angular CLI:

npm install -g @angular/cli

Create workspace:

ng new angular-microfrontend
cd angular-microfrontend

Step 2 — Create Host Application

ng generate application shell

Step 3 — Create Remote Application

ng generate application products

You can also create multiple remotes.

Step 4 — Add Module Federation

Install Module Federation plugin.

ng add @angular-architects/module-federation --project shell --type host

Then add for remote app:

ng add @angular-architects/module-federation --project products --type remote

Step 5 — Configure Remote Module

Example configuration:

module-federation.config.js
module.exports = {
  name: "products",

  exposes: {
    "./Module": "./projects/products/src/app/products/products.module.ts",
  },

  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true },
    "@angular/router": { singleton: true },
  },
};

Step 6 — Configure Host Application

module.exports = {
  remotes: {
    products: "http://localhost:4201/remoteEntry.js",
  },
};

Step 7 — Add Route in Host App

In app-routing.module.ts

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './Module',
      }).then(m => m.ProductsModule)
  }
];

Step 8 — Run Applications

Start remote app:

ng serve products --port 4201

Start host app:

ng serve shell --port 4200

Now open:

http://localhost:4200/products

Your micro frontend is loaded dynamically.

Advantages of Angular Micro Frontends

1. Independent Development

Different teams can work on separate applications.

2. Independent Deployment

Each micro frontend can be deployed separately.

3. Scalability

Large applications become easier to manage.

4. Faster Development

Teams can work in parallel.

Real-World Use Cases

Angular Micro Frontends are used in:

  • Enterprise SaaS platforms

  • E-commerce platforms

  • Banking dashboards

  • CRM systems

  • Admin panels

Angular 21 Benefits for Micro Frontends

Angular 21 improves micro frontend development with:

  • Signals based architecture

  • Standalone components

  • Improved performance

  • Better developer tooling

Final Thoughts

Angular Micro Frontends with Module Federation are becoming a standard architecture for large enterprise applications.

If you want to build scalable Angular applications, learning Module Federation is an essential skill.

This architecture allows teams to develop faster, deploy independently, and maintain large Angular applications efficiently.

0 Comments