Architecting large scale Angular apps with Module Federation

on YouTube ↗44m

" summary

Claims that splitting an Angular monorepo into buildable libraries plus vertical app slices cuts local serve and CI times dramatically, using Webpack Module Federation to load compiled remotes and NX to generate and wire remotes. Concrete tooling: Module Federation, NX generators and its affected-graph caching, and NX Cloud shared cache. Demonstrated numbers: multi-minute cold builds versus cached incremental runs dropping to seconds (example: ~1+ minute cold to ~7s cached), with incremental migration commands and static-served remotes.

AI-written summary · about

" chapters (11)

1. 0:00Introduction and welcome
2. 1:38Scaling challenges in software
3. 4:09Organizing large workspaces
4. 8:09Enforcing code boundaries
5. 10:35Optimizing build performance
6. 13:25Incremental builds and caching
7. 17:11Vertical slicing with MF
8. 20:07Module federation in action
9. 26:57Nx cloud and sustainability
10. 29:02Conclusion and resources
11. 33:30Q&A session

" related talks

• 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
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 22mFederated Angular - Why and HowManfred Steyer · NG-BE 2021
• 31mMicro frontends and the multiverse of FrameworksAdrian Iskandar Espinosa Caballero · ng-conf 2022
• 22mRoad to Module FederationSumit Arora, Abdella Ali · ng-conf 2023