Federated Angular: Micro Frontends with Module Federation

on YouTube ↗30m

" summary

Claim: Webpack 5 Module Federation lets separately compiled Angular apps load at runtime and share libraries so Angular itself loads only once. Uses an ng add package Angular Architects Module Federation, a custom builder and an experimental webpack5 opt‑in for CLI 11, exposes flights.module.ts via a remote entry, and supports shared singletons with runtime error on mismatch. Demo shows a microfrontend served from localhost:3000 → shell localhost:5000 loading on demand and working with an 11.6 KB payload.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 1:17Micro Frontends
3. 5:09Webpack 5 Module Federation
4. 9:18Federated Angular: Angular, CLI, & Module Federation
5. 29:29Conclusion

" related talks

• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 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