This content originally appeared on DEV Community and was authored by Parth Raval
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
2. Create a Workspace
ng new mfe-workspace --create-application false
cd mfe-workspace
3. Install Native Federation
ng add @angular-architects/native-federation
4. Generate the Host Application (Shell)
ng generate application shell --routing --style=scss
ng add @angular-architects/native-federation --project shell --type host
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
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 },
}
});
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 }
];
In mfe2/app.routes.ts:
import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
export const remoteRoutes: Routes = [
{ path: '', component: DashboardComponent }
];
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' }
];
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 {}
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>
10. Run All Apps
ng serve mfe1 --port 4201
ng serve mfe2 --port 4202
ng serve shell --port 4200 -o
Visit http://localhost:4200 → You can now navigate between MFE1, MFE2, and a simple host route.
Best Practices for Angular Micro Frontends
- Shared Dependencies → Avoid version mismatches by sharing Angular core libraries.
- Route Isolation → Keep remote routes isolated to prevent conflicts.
- Preloading → Preload remotes if you want faster navigation.
- Error Handling → Implement fallback UIs when a remote is unavailable.
- Communication → Use RxJS, shared services, or custom events for inter-MFE communication.
- CI/CD Pipelines → Deploy each MFE independently with tools like GitHub Actions or Azure DevOps.
- 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
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.
This content originally appeared on DEV Community and was authored by Parth Raval
Parth Raval | Sciencx (2025-09-10T12:20:08+00:00) Micro Frontend Architecture with Angular 20: A Complete Guide. Retrieved from https://www.scien.cx/2025/09/10/micro-frontend-architecture-with-angular-20-a-complete-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.