Angular based Micro frontends with module federation

on YouTube ↗21m

" summary

Shows concrete use of webpack 5 Module Federation with Angular 12+: a shell (host) loads remotes at runtime, demonstrating both static and dynamic Federation via generated remoteEntry metadata and a dynamic script loader. Shares libraries opt‑in to avoid duplicate Angular downloads, explains handling version mismatches, and builds a working demo that loads an Angular remote and a React remote (a “Frankenstein Architecture”) from separately compiled/deployed apps. Labs and source are provided.

AI-written summary · about

" chapters (10)

1. 0:00Introduction and conference
2. 0:33Micro frontends overview
3. 3:11Module federation basics
4. 5:01Static vs dynamic federation
5. 7:52Sharing libraries and setup
6. 9:43Live demonstration
7. 12:53Sharing data between apps
8. 14:25Mixed framework architectures
9. 17:01Interoperability demo
10. 18:40Workshop resources and Q&A

" related talks

• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 31mMFEs , Micro-Frontends with Module Federation and AngularManfred Steyer · Reliable Web Summit 2021