> Markdown version of [/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular?t=2](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular?t=2). 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).

---

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

Are Webpack bottlenecks holding back your Angular micro frontends? Discover how Native Federation leverages web standards to seamlessly scale across modern, lightning-fast bundlers like esbuild and Vite.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** World Congress 2024
- **Published:** August 20, 2024
- **Duration:** 29:36
- **URL:** https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular

## Summary

Scaling applications across autonomous teams requires micro frontends, but users still expect a single, unified frontend experience. While Webpack module federation initially solved this runtime integration challenge, its tight coupling to Webpack became a bottleneck as the Angular ecosystem shifted toward heavily optimized builders like esbuild and Vite.

Native Federation offers a vendor-neutral, bundler-agnostic solution by leveraging web standards like ECMAScript modules and import maps. By wrapping modern bundlers via a lightweight adapter, developers maintain the standard module federation mindset—seamlessly sharing dependencies and dynamically managing metadata updates via a runtime manifest—without rewriting their existing deployment operations.

This standards-based foundation enables advanced structural approaches like framework-agnostic compilation, which safely wraps disparate frameworks into web components to support seamless migration. Furthermore, Native Federation powers responsive island architectures that purposefully defer loading secondary UI elements until they scroll into view. While these runtime architectures, especially when paired with server-side rendering (SSR) for absolute performance, successfully deliver massive B2C scalability, they intentionally introduce operational complexity and should be selectively implemented to match organizational maturity.

**Keywords:** angular micro frontends, native federation, webpack module federation, esbuild bundler migration, vite build optimization, runtime application integration, framework agnostic architectures, ecmascript web modules, dynamic import maps, web component encapsulation, deferred component loading, island architecture patterns, SSR performance optimization, shared dependency management, frontend team autonomy

## Chapters

1. **Micro frontends and Webpack module federation challenges** (00:02) — Runtime integration of micro frontends traditionally relies on Webpack module federation despite emerging bundler alternatives.
1. **Introducing Native Federation for framework-agnostic builds** (06:47) — Wrapping custom bundlers with web standards like ECMAScript modules decouples builds from Webpack.
1. **Configuring Native Federation in Angular projects** (11:03) — Modifying auto-generated federation configurations allows developers to expose application modules and share dependencies securely.
1. **Integrating multiple frameworks with the Frankenstein architecture** (18:34) — Encapsulating differing frontend frameworks and versions into web components enables concurrent runtime execution.
1. **Optimizing application performance using island architectures** (23:52) — Loading non-critical micro frontends only when they scroll into view significantly improves initial application performance.
1. **Balancing architectural complexity and performance needs** (26:22) — Balancing performance requirements with architectural complexity helps teams decide when server-side rendering is genuinely necessary.
1. **Summary and additional developer resources for federation** (28:36) — A review of native federation benefits accompanies a link to an extensive ebook on scalable architecture.

## Related Moments

- [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?")
- [Enabling framework-agnostic modularity with Webpack module federation](https://www.wearedevelopers.com/videos/130-front-end-micro-apps) (from "Front-End Micro Apps")
- [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Addressing developer questions on framework capabilities and architectural alternatives](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Summarizing module federation patterns and architectural choices](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")
- [Core concepts and architecture of the NativeScript framework](https://www.wearedevelopers.com/videos/122-unleash-your-web-skills-on-native) (from "Unleash your web skills on native!")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [The Best 7 Frontend Frameworks for Developers in 2025](https://www.wearedevelopers.com/magazine/400-the-best-7-frontend-frameworks-for-developers-in-2025)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**