The Microfrontend Revolution

on YouTube ↗41m

" summary

Demonstrates using Webpack 5 Module Federation with Angular to load separately compiled microfrontends at runtime, sharing libraries so a single Angular instance is negotiated and reused. Shows an installable helper angular-architects/module-federation that generates webpack config and a custom builder, an actual shell loading a remote from different origin, and a network trace where the remote chunk is ~12.6k and Angular is not reloaded. Notes Angular 11 + CLI opt‑in to webpack5 is experimental but functional for early production use.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 3:01Micro Frontends
3. 6:28How to load separately compiled code?
4. 7:55Webpack 5 Module Federation

" related talks

• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 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
• 35mMicro Frontends with Module Federation, Angular and Azure Static Web AppsManfred Steyer · Global Azure Austria 2021