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:
- shell β the host application
- 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
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)