DEV Community

Paaarth
Paaarth

Posted on • Edited 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 Workspace 

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

First Question:

? Which AI tools do you want to configure with Angular best practices?
>(*) None
Enter fullscreen mode Exit fullscreen mode

Select None and press Enter.

3. Move into Workspace 

cd mfe-workspace
Enter fullscreen mode Exit fullscreen mode

4. Install Native Federation 

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

When asked, press Y to continue.

Give project name:

? Project name (press enter for default project) mfe-workspace
Enter fullscreen mode Exit fullscreen mode

5. Generate Shell (Host App) 

ng generate application shell --routing --style=scss
Enter fullscreen mode Exit fullscreen mode

Questions:

  • SSR/SSG → No
  • Zoneless → No

Then add federation host:

ng add @angular-architects/native-federation --project shell --type host
Enter fullscreen mode Exit fullscreen mode

6. Generate Remotes (MFE1 & MFE2) 

ng generate application mfe1 --routing --style=scss
ng generate application mfe2 --routing --style=scss
Enter fullscreen mode Exit fullscreen mode

For both:

  • SSR/SSG → No
  • Zoneless → No

7. Configure module-federation.config.ts

projects/shell/federation.config.js

const { withNativeFederation, shareAll } = 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: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
  ],
  features: {
    ignoreUnusedDeps: true
  }
});
Enter fullscreen mode Exit fullscreen mode

8. Update angular.json Ports

  • Shell → 4200
  • MFE1 → 4201
  • MFE2 → 4202

9. Generate Home Components

For MFE1 

ng g c mfe1-home
Enter fullscreen mode Exit fullscreen mode

Update projects/mfe1/src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { Mfe1Home } from './../mfe1-home/mfe1-home';

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

For MFE2 

ng g c mfe2-home
Enter fullscreen mode Exit fullscreen mode

Update projects/mfe2/src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { Mfe2Home } from './../mfe2-home/mfe2-home';

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

10. Configure Shell Routes 

ng g c shell-home
Enter fullscreen mode Exit fullscreen mode

Update projects/shell/src/app/app.routes.ts:

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

export const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () => import('./../../../mfe1/src/app/app.routes').then(m => m.routes),
  },
  {
    path: 'mfe2',
    loadChildren: () => import('./../../../mfe2/src/app/app.routes').then(m => m.routes),
  },
  {
    path: 'home',
    loadComponent: () => import('./../shell-home/shell-home').then(m => m.ShellHome)
  },
  { path: '', redirectTo: 'mfe1', pathMatch: 'full' }
];
Enter fullscreen mode Exit fullscreen mode

11. Shell Template

shell/app.html

<nav>
  <a routerLink="/mfe1" routerLinkActive="active">Remote MFE1</a> |
  <a routerLink="/mfe2" routerLinkActive="active">Remote MFE2</a> |
  <a routerLink="/home" routerLinkActive="active">Shell Home</a>
</nav>
<router-outlet />
Enter fullscreen mode Exit fullscreen mode

shell/app.ts

import { Component, signal } from '@angular/core';
import { RouterModule, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('shell');
}
Enter fullscreen mode Exit fullscreen mode

12. Run Applications

Start MFE1 & MFE2:

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

Then run Shell:

ng serve shell --port 4200
Enter fullscreen mode Exit fullscreen mode

You now have a fully working Micro Frontend setup with Angular 20 using Native Federation:

  • Shell (Host) → Port 4200
  • MFE1 (Remote) → Port 4201
  • MFE2 (Remote) → Port 4202

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.

Github Project link

Micro-Front-End

Top comments (2)

Collapse
 
sushma_learning profile image
Sushma •

Need git repo for this code base
Stuck with this part

{
    path:'mfe1',
    loadChildren: () => import('mfe1/Routes').then(m => m.remoteRoutes)
},
{
    path: 'mfe2',
    loadChildren: () => import('mfe2/Routes').then(m => m.remoteRoutes)
}
Enter fullscreen mode Exit fullscreen mode

Need clear explanation for fetching routes of remotes

Collapse
 
paaarth profile image
Paaarth •

Thanks For your comment and sorry for the inconvenience caused.
I have updated the code snipet and added the github repo link as well
github.com/Paaarth/mfe-workspace