Angular › Micro Frontends with Angular

What are some of the main challenges teams face when adopting a micro frontend architecture with Angular?

Advanced

Answer

Common challenges include keeping a consistent design and user experience across independently built pieces, managing shared state between separate applications that do not naturally share the same Angular injector, avoiding duplicate loading of large shared dependencies, and coordinating versioning and communication between teams that now work on genuinely separate codebases.

// Sharing state between micro frontends often relies on a shared, framework agnostic event bus
window.dispatchEvent(new CustomEvent('cart-updated', { detail: { itemCount: 3 } }));

// A separate micro frontend listens for the same event
window.addEventListener('cart-updated', (e) => updateCartBadge(e.detail.itemCount));

Real-world example A company adopting micro frontends builds a small shared event bus using plain browser custom events, letting their independently built cart and header micro frontends stay in sync without directly depending on each other's internal code.

Common follow-ups: What tools exist specifically to help manage shared state across a micro frontend architecture?;How do teams typically handle testing an entire user flow that spans multiple separately deployed micro frontends?

State Management;Performance & Lazy Loading