The Microfrontend Revolution - Using Webpack 5 Module Federation with Angular

on YouTube ↗33m

" summary

Concrete recipe for microfrontends with Module Federation and Webpack 5 using Angular: a shell loads remotely compiled remotes at runtime via a tiny remote entry script tag, shared libraries live in a shared array to avoid duplicate Angular bundles, and a custom webpack config or patched CLI is required today with official CLI support targeted around v11. Demo proves it works end to end (a shell loading a remote snake strategy) but warns about version conflicts, needing conventions or a monorepo and e2e tests to avoid runtime breakage.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 0:22Do you remember them?
3. 2:25Monolith
4. 2:50Microservices
5. 4:06Microfrontends
6. 4:30Autonomous Teams
7. 13:18Webpack 5 Module Federation
8. 15:47How to Get the Microfrontend's URL?
9. 18:17Conflicting Shared Libs
10. 25:13Well...
11. 27:25Free eBook
12. 29:44Challange
13. 30:50Conclusion

" related talks

• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 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
• 27mMicro-Frontends with Module Federation: Beyond the BasicsManfred Steyer · EnterpriseNG 2021