Back to Browse

Build Microfrontends Without Webpack! Native Federation Explained with Angular + ESBuild

1.9K views
Jul 1, 2025
7:40

Learn how to implement microfrontends in Angular using Native Federation without relying on Webpack! In this video, we explore how Native Module Federation with ECMAScript modules (ESM) and esbuild allows you to split your app into multiple independently deployed frontends. This step-by-step tutorial will help you understand how to set up host and remote apps using import maps, dynamic import(), and shared libraries—all with modern tooling. 💡 Topics Covered: What is Native Federation? How it compares to Webpack Module Federation How to set up federation.config.js Using esbuild to build and serve microfrontends Live demo: Host and Remote communication Pros, Cons, and when to use it 🚀 Technologies Used: Angular, Native Federation by SoftArc, ECMAScript Modules (ESM), Import Maps, ESBuild 📁 https://topmate.io/virtualboard 📌 Don’t forget to Like 👍 | Subscribe 🔔 | Share 💬 💬 Have a question? - https://topmate.io/virtualboard Articles Related to video - https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild/ https://medium.com/@erickzanetti/understanding-the-difference-between-native-federation-module-federation-and-single-spa-6cd6d29029b5 🎓 More videos coming on microfrontends, Vite, Angular performance tips, and real-world architecture guides! #Angular #NativeFederation #Microfrontends #ESBuild #JavaScript #FrontendArchitecture #WebDev #AngularTutorial #ModuleFederation #ImportMap #ESModules #NoWebpack #Softarc

Download

0 formats

No download links available.

Build Microfrontends Without Webpack! Native Federation Explained with Angular + ESBuild | NatokHD