> Markdown version of [/videos/131-the-microfrontend-revolution-using-webpack-5-module-federation-with-angular](https://www.wearedevelopers.com/videos/131-the-microfrontend-revolution-using-webpack-5-module-federation-with-angular). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

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.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** WeAreDevelopers LIVE
- **Published:** March 25, 2021
- **Duration:** 33:18
- **URL:** https://www.wearedevelopers.com/videos/131-the-microfrontend-revolution-using-webpack-5-module-federation-with-angular

## Summary

Historically, building microfrontends required cumbersome workarounds because bundlers expected all application code to be available upfront for optimization. Webpack 5 Module Federation fundamentally changes this paradigm by enabling applications to load separately compiled and deployed code on demand at runtime. This architecture divides a complex front-end monolith into smaller, agile, team-owned microfrontends (remotes) that seamlessly integrate into a single unified user experience (the host or shell).

Implementing Module Federation within Angular requires bypassing the Angular CLI's standard Webpack abstraction. Developers can use custom builders, such as the @angular-architects/module-federation plugin, to inject the necessary Webpack 5 configurations without altering the framework's native behavior. Once configured, Angular handles microfrontend ingestion identically to standard lazy-loaded dynamic imports, while Webpack independently manages the underlying remote entry metadata and dependency sharing. This architecture ensures heavy dependencies like Angular Core are loaded only once across the entire application ecosystem, significantly reducing overhead.

The practical application of this pattern requires mapping virtual module paths and creating local TypeScript declaration files to maintain compilation type safety for dynamically injected modules. While static federation hardcodes routing paths for simplicity during development, enterprise production environments benefit from dynamic federation, which queries APIs at runtime to discover available remote modules. Furthermore, managing shared dependency versions is critical; teams must configure strict fallback behaviors, such as fail-fast runtime errors, to prevent application instability when major framework version mismatches occur between the shell and its remote microfrontends.

**Keywords:** microfrontends, webpack 5, module federation, angular cli, custom builders, dynamic imports, lazy loading, shared dependencies, host and remote architecture, remote entry metadata, angular-architects plugin, static federation, dynamic federation, version mismatch handling, typescript declarations

## Chapters

1. **Micro frontend architecture and the shell concept** (00:17) — Breaking complex applications into independent pieces hosted in an integrated shell.
1. **Resolving lazy loading constraints with module federation** (04:18) — Why traditional dynamic imports fail for standalone deployments due to bundler limitations.
1. **Defining host and remote roles for application integration** (06:04) — Mapping URLs and exposing code dynamically so frameworks treat them as native chunks.
1. **Deploying remote entry metadata and shared dependencies** (08:28) — Generating lightweight entry points to instruct the shell on how to avoid duplicate library loads.
1. **Modifying webpack builds via custom angular cli builders** (09:43) — Safely exposing webpack settings by routing the angular build process through an external builder.
1. **Generating webpack boilerplates using architecture plugins** (12:09) — Automating configuration generation and localized port hosting with a community package.
1. **Enforcing webpack 5 compatibility in angular projects** (14:43) — Circumventing legacy bundle rules by overriding package managers to mandate newer webpack versions.
1. **Exposing remote routes via partial webpack configuration** (17:41) — Customizing the generated setup file to publish exact components while establishing version mismatch policies.
1. **Connecting host shell structures using static federation mapping** (23:09) — Statically defining micro frontend URLs in the shell application to resolve compiled modules.
1. **Resolving framework type errors for uncompiled remote paths** (25:30) — Supplementing typescript declarations so the compiler permits dynamic component references at runtime.
1. **Verifying external runtime requests through network inspection** (27:34) — Confirming the correct origin and minimized payload delivery when requesting distant javascript modules.
1. **Planning production upgrades for native webpack support** (30:07) — Migrating to standard integrations by keeping track of the framework update roadmap.

## Related Moments

- [Micro frontends and Webpack module federation challenges](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular) (from "Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular")
- [Implementing micro frontends with webpack module federation](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Delivering remote modules with Webpack Module Federation](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Live coding a static module federation architecture](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Enabling framework-agnostic modularity with Webpack module federation](https://www.wearedevelopers.com/videos/130-front-end-micro-apps) (from "Front-End Micro Apps")
- [Configuring webpack module federation for hosts and remotes](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")

## Related Articles

- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix)
- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)

## Related Jobs

- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [Staff Frontend Software Engineer](https://www.wearedevelopers.com/jobs/48370-staff-frontend-software-engineer) at **Bitdrift**
- [Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/3047993-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**