DEV Community

Parth Raval
Parth Raval

Posted on

Micro Frontend Architecture with Angular 20: A Complete Guide

#microfrontend #angular #typescript #webdev

Angular-20-MFE-Micro-Front-End-Archietecture-MONOREPO

Micro Frontend (MFE) architecture has become a game-changer for enterprise-scale Angular applications, especially with the release of Angular 20 and the @angular-architects/native-federation plugin. This approach allows teams to build scalable, maintainable, and independently deployable frontend applications by splitting a large app into smaller, focused micro apps.

In this blog, we’ll dive deep into:

  • What Micro Frontend architecture is
  • Why Angular 20 is perfect for MFEs
  • Step-by-step guide to setting up a host and two remote apps
  • Lazy loading, shared routes, and communication
  • Best practices for SEO, performance, and CI/CD

What is Micro Frontend Architecture?

Micro Frontend is an architectural style where a frontend app is decomposed into smaller, self-contained micro applications that can be developed, tested, and deployed independently. Just like Microservices in the backend, MFEs empower organizations to scale frontend development across multiple teams.

Key Benefits:

  • Scalability → Multiple teams can work in parallel without conflicts.
  • Technology Independence → Different MFEs can even use different frameworks (Angular, React, Vue, etc.).
  • Independent Deployments → Push updates without touching the entire app.
  • Faster Builds → Smaller codebases lead to quicker CI/CD pipelines.

Why Angular 20 + Native Federation?

With Angular 20, the @angular-architects/native-federation package offers a seamless way to implement Micro Frontends using Webpack 5 Module Federation. Unlike older setups, Native Federation is:

  • Optimized for Angular CLI 17+ (and Angular 20)
  • Faster builds with incremental updates
  • Better DX with simplified configuration
  • Shared dependencies to avoid duplication

Step-by-Step: Creating Micro Frontends in Angular 20

1. Prerequisites

Make sure you have:

Node.js >= 18
Angular CLI >= 17
npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

2. Create a Workspace 

ng new mfe-workspace --create-application false
cd mfe-workspace
Enter fullscreen mode Exit fullscreen mode

3. Install Native Federation 

ng add @angular-architects/native-federation
Enter fullscreen mode Exit fullscreen mode

4. Generate the Host Application (Shell) 

ng generate application shell --routing --style=scss
ng add @angular-architects/native-federation --project shell --type host
Enter fullscreen mode Exit fullscreen mode

5. Generate Remote Applications (MFE1 & MFE2) 

ng generate application mfe1 --routing --style=scss
ng generate application mfe2 --routing --style=scss

ng add @angular-architects/native-federation --project mfe1 --type remote
ng add @angular-architects/native-federation --project mfe2 --type remote
Enter fullscreen mode Exit fullscreen mode

Now you have:

  • shell → Host
  • mfe1 → Remote 1
  • mfe2 → Remote 2

6. Configure Remotes in the Host

Update projects/shell/module-federation.config.ts:

const { withNativeFederation } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
  name: 'shell',
  remotes: {
    mfe1: "http://localhost:4201/remoteEntry.json",
    mfe2: "http://localhost:4202/remoteEntry.json"
  },
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
    "@angular/router": { singleton: true, strictVersion: true },
  }
});
Enter fullscreen mode Exit fullscreen mode

7. Setup Remote Routes

In mfe1/app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

export const remoteRoutes: Routes = [
  { path: '', component: HomeComponent }
];
Enter fullscreen mode Exit fullscreen mode

In mfe2/app.routes.ts:

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

export const remoteRoutes: Routes = [
  { path: '', component: DashboardComponent }
];
Enter fullscreen mode Exit fullscreen mode

8. Configure Host Routes (Lazy + Simple)

In shell/app.routes.ts:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () => import('mfe1/Routes').then(m => m.remoteRoutes)
  },
  {
    path: 'mfe2',
    loadChildren: () => import('mfe2/Routes').then(m => m.remoteRoutes)
  },
  {
    path: 'simple',
    loadComponent: () => import('./simple/simple.component').then(m => m.SimpleComponent)
  },
  { path: '', redirectTo: 'mfe1', pathMatch: 'full' }
];
Enter fullscreen mode Exit fullscreen mode

Create shell/simple/simple.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-simple',
  standalone: true,
  template: `<h2>Simple Local Route</h2><p>This is a local component inside the Shell.</p>`
})
export class SimpleComponent {}
Enter fullscreen mode Exit fullscreen mode

9. Add Navigation Links in Host Template

In shell/app.component.html:

<nav>
  <a routerLink="/mfe1" routerLinkActive="active">Remote MFE1</a> |
  <a routerLink="/mfe2" routerLinkActive="active">Remote MFE2</a> |
  <a routerLink="/simple" routerLinkActive="active">Local Simple</a>
</nav>
<router-outlet></router-outlet>
Enter fullscreen mode Exit fullscreen mode

10. Run All Apps 

ng serve mfe1 --port 4201
ng serve mfe2 --port 4202
ng serve shell --port 4200 -o
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:4200 → You can now navigate between MFE1, MFE2, and a simple host route.

Best Practices for Angular Micro Frontends

  1. Shared Dependencies → Avoid version mismatches by sharing Angular core libraries.
  2. Route Isolation → Keep remote routes isolated to prevent conflicts.
  3. Preloading → Preload remotes if you want faster navigation.
  4. Error Handling → Implement fallback UIs when a remote is unavailable.
  5. Communication → Use RxJS, shared services, or custom events for inter-MFE communication.
  6. CI/CD Pipelines → Deploy each MFE independently with tools like GitHub Actions or Azure DevOps.
  7. SEO Optimization → Use Angular Universal (SSR) or prerendering to make MFEs SEO-friendly.

Folder Structure Overview 

mfe-workspace/
 ├── projects/
 │   ├── shell/   # Host Application
 │   ├── mfe1/    # Remote 1
 │   └── mfe2/    # Remote 2
 └── angular.json
Enter fullscreen mode Exit fullscreen mode

Conclusion

With Angular 20 and Native Federation, building Micro Frontends is now simpler, faster, and production-ready. By breaking down large applications into smaller MFEs, teams can scale development, deploy independently, and improve performance without compromising on user experience.

If you’re working on an enterprise Angular project in 2025, Micro Frontend architecture is the way forward.

Top comments (0)