The Hidden Challenges of Runtime Integrated MFs
summary
Hands-on lessons from several proofs of concept: using Module Federation with Angular frequently fails once apps use routing, forms or state — even patch-level version mismatches cause crashes — so enforce version equality via governance or a monorepo. Wrapping microfrontends as Angular Elements (concatenated into one widget JS) lets different Angular versions coexist but breaks shared routing. Implemented URL sync with DOM custom events or BroadcastChannel plus CloudEvents; BroadcastChannel with a correlation ID works in practice for deep linking, but routing orchestration still needs nontrivial glue.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 2:00Project context
- 3:29The role of angular
- 6:19Challenges in team scaling
- 7:46Micro frontend benefits
- 9:54Integration strategies
- 12:36Module federation insights
- 16:21Managing versioning
- 19:09Web components as a wrapper
- 23:31Routing complexities
- 26:48The history api trick
- 31:01Deep linking challenges
- 34:06Event-based synchronization
- 36:33Achieving synchronization
- 40:06Conclusion and summary
- 42:29Q&A session
related talks
27mMicro-Frontends with Module Federation: Beyond the Basics
31mMFEs , Micro-Frontends with Module Federation and Angular
31mMicro frontends and the multiverse of Frameworks
25mAdvanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
30mFederated Angular: Micro Frontends with Module Federation
30mFederated Angular: Micro Frontends with Module Federation
21mAngular based Micro frontends with module federation
36mFearless Microfrontends: Angular and Native Federation in Action