The Microfrontend Revolution: Using Webpack 5 Module Federation with Angular

on YouTube ↗38m

" summary

Module Federation in Webpack 5 lets independently compiled microfrontends load at runtime from different origins and share Angular to avoid duplicating frameworks, with the demo loading a micro-app as a 3.1 KB bundle after retrieving a tiny remoteEntry.js that tells the shell where to find exposures. Setup uses Webpack 5 with Angular, options for loading remotes include static script tags or the runtime API, tooling notes mention ngx-build-plus and waiting on Angular CLI v11, and main risks are version conflicts requiring conventions, monorepos or integration tests.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 1:38Bonnie
3. 2:52Microservices
4. 5:18Micro frontends
5. 5:47Introduction
6. 8:02Demo
7. 22:46When can we have it
8. 25:46Conclusion
9. 27:06Think first
10. 28:38Contact Manfred
11. 29:01Q A

" related talks

• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 35mMicro Frontends with Module Federation, Angular and Azure Static Web AppsManfred Steyer · Global Azure Austria 2021
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021