The Micro Frontend Revolution: Webpack 5 Module Federation and Angular

on YouTube ↗29m

" summary

Module Federation in Webpack 5 lets a host shell load separately compiled Angular apps at runtime and share singletons like Angular core so only one instance loads; demo shows a remote on localhost:3000 loaded into a shell on 5000 with the remote bundle ~12.6 KB. Angular CLI 11 bundles with Webpack 4 by default, so projects opt into Webpack 5 using yarn and a custom builder such as angular architects module federation to enable Module Federation and optional dynamic federation for runtime lookups.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 0:50What is a Micro Frontend
3. 4:23What is Module Federation
4. 9:57The trick
5. 11:40Angular Architects
6. 12:49Demonstration
7. 13:43Packagejson
8. 15:45Enabling Module Federation
9. 17:36Micro Frontend Configuration
10. 22:15Lazy Loading
11. 24:58Testing
12. 26:11When to use
13. 27:17Angular Architects Ebook
14. 27:40Conclusion

" related talks

• 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
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 35mMicro Frontends with Module Federation, Angular and Azure Static Web AppsManfred Steyer · Global Azure Austria 2021
• 27mMicro-Frontends with Module Federation: Beyond the BasicsManfred Steyer · EnterpriseNG 2021