Manfred Steyer

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.

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular
#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.

Related jobs
Jobs that call for the skills explored in this talk.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Using Webpack 5 Module Federation for micro frontends
04:47 MIN

Using Webpack 5 Module Federation for micro frontends

Front-End Micro Apps

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
How Module Federation enables runtime integration
05:28 MIN

How Module Federation enables runtime integration

Micro Frontends with Module Federation: Why and How?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Integrating micro frontends with module federation
02:57 MIN

Integrating micro frontends with module federation

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The role of micro-frontends in scaling development teams
05:24 MIN

The role of micro-frontends in scaling development teams

Micro-Frontends with Module Federation: Beyond the Basics

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Using Webpack 5 Module Federation for implementation
05:07 MIN

Using Webpack 5 Module Federation for implementation

Destructuring Frontend monoliths with MicroFrontends

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Loading micro-frontends with dynamic federation
08:25 MIN

Loading micro-frontends with dynamic federation

Micro-Frontends with Module Federation: Beyond the Basics

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Implementing dynamic federation at runtime
04:08 MIN

Implementing dynamic federation at runtime

Micro Frontends with Module Federation: Why and How?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The evolution from Webpack to bundler-agnostic federation
04:41 MIN

The evolution from Webpack to bundler-agnostic federation

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

Featured Partners

Related Videos

See all videos
Micro Frontends with Module Federation: Why and How?45:40

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

Micro-Frontends with Module Federation: Beyond the Basics44:35

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular29:36

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular

Manfred Steyer

On tour with heroes == Moving from Angular to WebComponents43:08

On tour with heroes == Moving from Angular to WebComponents

Benjamin Glusa

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios24:47

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Manfred Steyer

Destructuring Frontend monoliths with MicroFrontends41:49

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Related Articles

View all articles
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
LM
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript