WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 25, 2021

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

Are cumbersome workarounds ruining your microfrontend architecture? Learn how Webpack 5 Module Federation injects dynamically compiled Angular code at runtime to shatter the front-end monolith.

Pause
Mute Enter Fullscreen
#1 about 4 min

Micro frontend architecture and the shell concept

Breaking complex applications into independent pieces hosted in an integrated shell.

#2 about 2 min

Resolving lazy loading constraints with module federation

Why traditional dynamic imports fail for standalone deployments due to bundler limitations.

#3 about 3 min

Defining host and remote roles for application integration

Mapping URLs and exposing code dynamically so frameworks treat them as native chunks.

#4 about 2 min

Deploying remote entry metadata and shared dependencies

Generating lightweight entry points to instruct the shell on how to avoid duplicate library loads.

#5 about 3 min

Modifying webpack builds via custom angular cli builders

Safely exposing webpack settings by routing the angular build process through an external builder.

#6 about 3 min

Generating webpack boilerplates using architecture plugins

Automating configuration generation and localized port hosting with a community package.

#7 about 3 min

Enforcing webpack 5 compatibility in angular projects

Circumventing legacy bundle rules by overriding package managers to mandate newer webpack versions.

#8 about 6 min

Exposing remote routes via partial webpack configuration

Customizing the generated setup file to publish exact components while establishing version mismatch policies.

#9 about 3 min

Connecting host shell structures using static federation mapping

Statically defining micro frontend URLs in the shell application to resolve compiled modules.

#10 about 3 min

Resolving framework type errors for uncompiled remote paths

Supplementing typescript declarations so the compiler permits dynamic component references at runtime.

#11 about 3 min

Verifying external runtime requests through network inspection

Confirming the correct origin and minimized payload delivery when requesting distant javascript modules.

#12 about 4 min

Planning production upgrades for native webpack support

Migrating to standard integrations by keeping track of the framework update roadmap.

Matching moments

6:44 min

Micro frontends and Webpack module federation challenges

Manfred Steyer Manfred Steyer · World Congress 2024

9:16 min

Implementing micro frontends with webpack module federation

Manfred Steyer Manfred Steyer · World Congress 2021

5:14 min

Delivering remote modules with Webpack Module Federation

Trishul Goel · JS Congress

10:43 min

Live coding a static module federation architecture

Manfred Steyer Manfred Steyer · World Congress 2021

3:39 min

Enabling framework-agnostic modularity with Webpack module federation

Serg Hospodarets · LIVE

6:23 min

Configuring webpack module federation for hosts and remotes

Manfred Steyer Manfred Steyer · JS Congress

More from WeAreDevelopers LIVE

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta thumbnail
6:07
1 day ago

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
1 day ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
15 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
22 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
24 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
29 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Related videos

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
World Congress 2021 • about 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Micro-Frontends with Module Federation: Beyond the Basics thumbnail
44:35
JS Congress • almost 5 years ago

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular thumbnail
29:36
World Congress 2024 • about 2 years ago

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

Manfred Steyer

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
World Congress 2025 • about 1 year ago

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

Manfred Steyer

Front-End Micro Apps thumbnail
35:17
LIVE • over 5 years ago

Front-End Micro Apps

Serg Hospodarets

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • almost 5 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.