MFEs , Micro-Frontends with Module Federation and Angular

on YouTube ↗31m

" summary

Demonstrates a shell that lazy loads remotes via dynamic imports using Module Federation (Webpack 5), with remotes including a React app wrapped as a custom element and multiple Angular versions packaged with Angular Elements / web components; dependencies are shared to avoid loading frameworks repeatedly, and the demo is deployed to Azure Static Web Apps. It works end to end but surfaces concrete pitfalls: router ownership clashes, the need to cache Angular platform instances, zone.js versioning, and increased bundle size, so use only for migration or mergers.

AI-written summary · about

" chapters (9)

1. 0:00The problem with everything
2. 2:50Why mix frameworks?
3. 5:53Agenda and introduction
4. 7:24Module federation basics
5. 12:28Web components explained
6. 17:19Combining technologies
7. 21:14Demo and implementation
8. 25:51Pitfalls and conclusion
9. 30:55Outro

" related talks

• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 27mMicro-Frontends with Module Federation: Beyond the BasicsManfred Steyer · EnterpriseNG 2021
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 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