Federated Angular: Micro Frontends with Module Federation

on YouTube ↗30m

" summary

Module Federation with Webpack 5 loads separately compiled Angular apps at runtime so a shell pulls a remote entry and exposes modules; demo shows a shell + MF1 on localhost:5000/3000 with the remote module fetched as ~11.6 KB and Angular shared so it does not ship twice. Configuration uses a module-federation plugin, optional Angular Architects module federation helper for the CLI, and an experimental CLI opt-in for Webpack 5; dynamic federation and version-conflict options are shown.

AI-written summary · about

" chapters (20)

1. 0:00Intro
2. 0:27Leonardos Helicopter
3. 1:16Microfrontence
4. 2:36Outline
5. 3:01Who am I
6. 3:29What is Module Federation
7. 3:54Dynamic Import
8. 5:07Module Federation
9. 7:56Remote Entry Point
10. 8:44Sharing
11. 9:17Making the CLI use Module Federation
12. 12:01Debugging with Module Federation
13. 12:15Demo
14. 16:51Source Code
15. 17:18Configuration
16. 25:37Demonstration
17. 26:50Testing
18. 28:58Free ebook
19. 29:28Summary
20. 30:07Contact Manfred

" related talks

• 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
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 27mMicro-Frontends with Module Federation: Beyond the BasicsManfred Steyer · EnterpriseNG 2021
• 35mMicro Frontends with Module Federation, Angular and Azure Static Web AppsManfred Steyer · Global Azure Austria 2021