DEV Community

Cover image for Building Modular Applications with Micro Frontends in Angular
Karol Modelski
Karol Modelski

Posted on

Building Modular Applications with Micro Frontends in Angular

#angular #javascript #frontend #webdev

Building Modular Applications with Micro Frontends in Angular

Managing a growing Angular app can feel overwhelming, but micro frontends offer a smart solution by breaking the app into smaller, independently built modules. Using @angular-architects/module-federation with Angular’s lazy loading, teams gain autonomy to develop and deploy faster, all while keeping the user experience smooth and cohesive.

Success depends on clear contracts, shared libraries, and independent CI/CD pipelines that keep everything running efficiently. With effective state management and communication, modules stay decoupled yet in sync, empowering teams to innovate quickly and build scalable, modular Angular applications ready for the future.

Understanding Micro Frontends in Angular

Imagine breaking a huge, complex web app into bite-sized pieces that different teams can build and ship independently. That’s the power of micro frontends! This chapter uncovers how Angular developers are embracing this approach to boost productivity, speed, and scalability.

What Are Micro Frontends?

Think of micro frontends as the frontend version of microservices — each team owns a small part of the UI, working independently but seamlessly playing together. For Angular developers, this means less waiting, fewer conflicts, and the freedom to upgrade parts of an app without rewriting the whole thing.

  • Key Takeaway 1: Micro frontends let teams own and deploy their UI pieces autonomously.
  • Key Takeaway 2: They bring scalability and agility to Angular apps, making upgrades smoother.

Benefits of Micro Frontends in Angular

Why are Angular teams excited about micro frontends? Here’s why:

  • Team Autonomy: Multiple teams work in parallel, no more stepping on each other’s toes.
  • Scalability: Add new features or modules easily without messing up existing code.
  • Incremental Upgrades: Roll out changes fast — no need to deploy the entire app every time.

🚀 Ready to elevate your frontend code quality? Download the FREE 10-Step Frontend Code Review Checklist now and start catching bugs early, boosting performance, and improving collaboration today! 📋✨ DOWNLOAD NOW!

Transform Your Frontend Code Reviews with This Proven 10-Step Checklist!

Here’s a peek at how you might set this up using the popular @angular-architects/module-federation library:

import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';

export const APP_ROUTES: Routes = [
  [...]
  {
    path: 'dashboard',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'mfe1',
        exposedModule: './Module',
      }).then((m) => m.DashboardModule),
  },
  {
    path: 'profile',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'mfe2',
        exposedModule: './Module',
      }).then((m) => m.ProfileModule),
  },
];
Enter fullscreen mode Exit fullscreen mode
  • Key Takeaway 1: The @angular-architects/module-federation library makes it simple to plug in remote Angular modules.
  • Key Takeaway 2: Your app loads micro frontends dynamically, keeping things fast and flexible.

Challenges of Micro Frontends

Of course, it’s not all smooth sailing. Micro frontends bring some puzzles to solve:

  • Complexity: More pieces mean more to coordinate.
  • Shared State: Keeping data in sync between micro frontends takes planning.
  • Performance: Extra loading steps could slow things down if not managed well.

But with smart design — like using shared event buses or centralized state stores — and efficient loading strategies, these hurdles are totally tackleable.

  • Key Takeaway 1: Thoughtful design is key to managing state and complexity.
  • Key Takeaway 2: Striking a balance between autonomy and a seamless user experience is essential.

Micro frontends open up exciting possibilities for Angular developers to build faster, scale smarter, and innovate without bottlenecks. With tools like @angular-architects/module-federation, getting started has never been easier — giving teams the freedom to grow and evolve their apps effortlessly.

Setting Up Micro Frontend Architecture with Angular

Imagine breaking a massive Angular app into smaller, independent pieces that teams can build and deploy on their own timeline. That’s the power of micro frontends! With the right tools — like the @angular-architects/module-federation plugin—setting this up becomes surprisingly simple and efficient.

Understanding Micro Frontends

Think of a huge Angular app as a city. Instead of managing the whole city at once, micro frontends split it into neighborhoods — each developed and maintained independently. The shell app acts like the city’s transportation hub, connecting these neighborhoods through smooth routing. The @angular-architects/module-federation library acts as the city planner, handling all the complex wiring behind the scenes.

  • Key Takeaway 1: Micro frontends help teams work independently without stepping on toes.
  • Key Takeaway 2: The plugin automates tricky configurations, making integration seamless.

Creating the Shell and Routing

Start by creating the shell app — the backbone of your micro frontend city:

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

Set up routes that lazily load remote neighborhoods (micro apps) only when needed, keeping the app speedy and responsive:

const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      remoteName: 'mfe1',
      exposedModule: './Module'
    }).then(m => m.RemoteModule)
  }
];
Enter fullscreen mode Exit fullscreen mode
  • Key Takeaway 1: Lazy loading means users only download what they need, right when they need it.
  • Key Takeaway 2: The shell smoothly connects everything, creating a unified user experience.

Setting Up Micro Frontend Apps

Build your micro apps like independent neighborhoods:

ng new mfe1 --routing --style=scss
ng add @angular-architects/module-federation --project mfe1 --type remote --port 4201
Enter fullscreen mode Exit fullscreen mode

The plugin configures everything — from exposing modules to sharing dependencies — so your micro apps can play nicely together. Sample Webpack config snippet for exposures:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  remotes: {
    "mfe1": "http://localhost:4201/remoteEntry.js",
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});
Enter fullscreen mode Exit fullscreen mode

Don’t forget to turn your shell into the host:

ng add @angular-architects/module-federation --project shell --type host --port 4200
Enter fullscreen mode Exit fullscreen mode
  • Key Takeaway 1: The plugin handles the heavy lifting so you can focus on building features.
  • Key Takeaway 2: Shared libraries prevent conflicts and keep your app running smoothly.

By splitting your Angular app into micro frontends using @angular-architects/module-federation, you gain flexibility, speed, and independent team workflows. This approach keeps your projects manageable and your users happy.

Integrating and Communicating Between Micro Frontends

Imagine building a large Angular app not as one giant block, but as smaller, independent pieces that fit perfectly together. This is the magic of micro frontends. In this chapter, explore how to dynamically load these pieces, share what they need, and make them talk to each other — using Angular’s powerful @angular-architects/module-federation library.

Dynamic Loading of Micro Frontends

Why load everything at once if you don’t need to? With @angular-architects/module-federation, your shell app grabs only the micro frontends it needs — when it needs them. This means faster load times and the freedom to update parts of your app without a full redeploy. It’s like calling in experts to work on different rooms of a house only when you need them.

  • Key Takeaway 1: Load micro frontends on demand to speed up your app and deploy independently.
  • Key Takeaway 2: Angular-focused tools make this complex magic simple and reliable.

Managing Shared Dependencies

Sharing is caring — especially for your Angular libraries! Instead of each micro frontend carrying its own heavy baggage, @angular-architects/module-federation lets them share common dependencies seamlessly. This keeps your app light and consistent, but remember: sharing works best when everyone’s speaking the same version language.

// Import share instead of shareAll:
const {
  share,
  withModuleFederationPlugin,
} = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
  remotes: {
    // Check this line. Is port 4201 configured?
    // "mfe1": "http://localhost:4201/remoteEntry.js",
  },

  // Explicitly share packages:
  shared: share({
    '@angular/core': {
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    },
    '@angular/common': {
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    },
    '@angular/common/http': {
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    },
    '@angular/router': {
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    },
  }),

  // Explicitly share mono-repo libs:
  sharedMappings: ['auth-lib'],
});
Enter fullscreen mode Exit fullscreen mode
  • Key Takeaway 1: Sharing dependencies cuts down on bulk and keeps apps in sync.
  • Key Takeaway 2: Align versions upfront to avoid messy conflicts.

Inter-Micro Frontend Communication

Even independent pieces need to chat! Use Angular’s shared services, custom browser events, or an event bus powered by RxJS to keep your micro frontends in sync without tangled dependencies. Think of it as passing sticky notes across different teams — simple, clear, and effective.

Another powerful tool for micro frontend communication is NgRx. By centralizing shared state in a root NgRx store managed by the shell, micro frontends can register feature stores and share critical app-wide data, such as user authentication or global settings. This approach enables reactive state sharing across micro frontends but introduces tighter coupling, so it’s best reserved for truly shared global state. For more loosely coupled communication, event-driven patterns remain preferable.

  • Key Takeaway 1: Keep communication loose and event-driven for better scalability.
  • Key Takeaway 2: Use Angular-friendly patterns like shared services, custom events, and when appropriate, NgRx for global state sharing.

By harnessing @angular-architects/module-federation and smart communication techniques, building an Angular micro frontend app feels less like juggling and more like orchestrating. Enjoy faster loads, independent deployments, and smooth teamwork across your app’s modules.

Conclusion

Micro frontends in Angular unlock new levels of flexibility and scalability, letting teams work independently and deliver features faster. Using tools like @angular-architects/module-federation, you can build modular, self-contained apps that fit together seamlessly and grow with your project.

Now is the time to dive in — try building your own shell and remote apps to see how this approach transforms development. The steps and tools covered here will help you get started with confidence.

Thanks for Reading 🙌

I hope these tips help you ship better, faster, and more maintainable frontend projects.

🛠 Explore My Developer Resources
Save time and level up your code reviews, architecture, and performance optimization with my premium Angular & frontend tools.
👉 Browse on Gumroad

💬 Let's Connect on LinkedIn
I share actionable insights on Angular & modern frontend development - plus behind‑the‑scenes tips from real‑world projects.
👉 Connect with me here

📣 Follow Me on X
Stay updated with quick frontend tips, Angular insights, and real-time updates - plus join conversations with other developers.
👉 Follow me on X

Your support fuels more guides, checklists, and tools for the frontend community.

Let's keep building together 🚀

Top comments (0)