DEV Community

Cover image for 🚀 How I Built a Micro Frontend Architecture in Angular 20 with Module Federation
Madhav Dangra
Madhav Dangra

Posted on

🚀 How I Built a Micro Frontend Architecture in Angular 20 with Module Federation

#angular #modulefederation #javascript #microfrontend

Micro frontend architecture has been gaining serious traction lately — and for good reason. It offers scalability, better separation of concerns, and team autonomy in large frontend applications. As someone passionate about scalable web development, I recently built a Micro Frontend architecture using Angular 20 — with a working Shell and Remote (Profile) application setup.

In this blog, I’ll walk you through:

  • What I built
  • How I structured the project
  • Challenges I faced and how I solved them
  • How you can build your own micro frontend with Angular

🔗 Live Project Code

The complete source code for this Angular Micro Frontend project is available here:
GitHub Repository – angular-micro-frontend

🏗️ The Setup

I created two separate Angular applications:

  1. shell – the host application
  2. profile – a remote micro frontend loaded into the shell

Each was created using:

ng new shell --standalone --routing --style=scss
ng new profile --standalone --routing --style=scss
Enter fullscreen mode Exit fullscreen mode

I used Module Federation via @angular-architects/module-federation to connect them.

🔗 Module Federation Configuration

In shell/webpack.config.js, I added:
remotes: {
profile: "http://localhost:4201/remoteEntry.js",
}

And in profile/webpack.config.js:
exposes: {
'./Module': './src/app/profile/profile.module.ts',
}

This allows the shell app to load modules from the profile app at runtime.

🧭 Routing & Lazy Loading

In shell/src/app/app.routes.ts, I configured lazy loading with a fallback:
{
path: 'profile',
loadChildren: () =>
import('profile/Module')
.then(m => m.ProfileModule)
.catch(err => {
console.error('Remote app failed:', err);
return import('./fallback/fallback.module').then(m => m.FallbackModule);
})
}

✅ This means:

  • If the profile app is running, it loads normally
  • If it’s down, the shell app doesn’t crash — a fallback view is shown instead

🧩 Standalone Components

Angular 17+ supports standalone components, which I used across both apps for simpler module management.

🐛 Challenges I Faced

Challenge :- remoteEntry.js not found when profile app is down
Solution :- Implemented catch() in loadChildren() to load fallback

Challenge :- Component is standalone, cannot be declared in NgModule
Solution :- Used import instead of declarations for standalone components

Challenge :- Styling and communication between shell and profile apps
Solution :- Kept apps loosely coupled; used Angular Material/SCSS for consistent design

📌 Takeaways

  • Angular 17+ Module Federation is a solid choice for building scalable frontends.
  • Fallback logic is essential to keep the shell app stable if remotes are unavailable.
  • Using standalone components simplifies your architecture and keeps your code modular.
  • Micro frontends aren't just a buzzword — they solve real-world scalability and team structure issues

📣 Final Thoughts

Whether you're exploring modern Angular, diving into Micro Frontends, or just building something cool — this architecture is a great starting point!

If you found this project helpful, inspiring, or just plain interesting:
🌟 Star the repo on GitHub
🤝 Connect with me on LinkedIn
💬 Got questions? Drop them in the comments or shoot me a message — I’d love to hear from you!

Let's keep learning, building, and sharing together 🚀

Top comments (0)