The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Microfrontends were an idea ahead of their time, like da Vinci's helicopter. Discover the modern tool that finally makes them a reality for Angular developers.

#1about 4 minutes

The historical challenge of building micro frontends

Micro frontends break large applications into smaller, independently deployable parts, but loading them into a unified shell has historically been difficult.

#2about 5 minutes

Understanding Webpack 5 Module Federation concepts

Module Federation enables loading separately compiled code at runtime by defining host and remote roles, exposing modules, and sharing common dependencies.

#3about 4 minutes

Using custom builders to integrate with Angular CLI

A custom Angular CLI builder is required to inject the Module Federation configuration into the underlying Webpack build process.

#4about 6 minutes

Demo: Setting up the project for Module Federation

The demonstration begins by addressing the Webpack 5 requirement in an Angular 11 project using a Yarn resolution and then adding the necessary plugin.

#5about 4 minutes

Demo: Configuring the remote micro frontend application

The remote application's Webpack config is adjusted to expose specific Angular modules and define shared dependencies to avoid duplication.

#6about 4 minutes

Demo: Configuring the host shell for lazy loading

The shell application is configured to map the remote micro frontend and uses a standard lazy-loaded route to import it at runtime.

#7about 3 minutes

Demo: Running and verifying the micro frontend integration

The shell and micro frontend are served simultaneously, demonstrating successful runtime loading and dependency sharing as verified in the browser's network tab.

#8about 2 minutes

Understanding the roadmap for production use

While Webpack 5 is production-ready, official Angular CLI integration is expected in version 12, making the current approach an experimental opt-in for prototyping.

#9about 2 minutes

Key takeaways and resources for further learning

Module Federation is a key enabler for micro frontends and plugin-based architectures, providing a straightforward way to load separately compiled code.