Module Federation: The Multi-Framework "Hydra"
Module Federation can unite micro frontends from different frameworks (e.g., Angular, React) in one app. This is a last resort for migrations or integrating legacy code, not a standard pattern, as it increases complexity and bundle size.
Why it exists
Sometimes you must make different frontend technologies coexist in one application. This happens when migrating legacy systems, performing a gradual framework upgrade, or integrating the tech stacks of merged companies. A full rewrite is often too costly or slow, so a strategy is needed to combine them.
The mental model
Think of a multi-framework micro frontend architecture as the "Hydra of Lerna": a single beast with many heads. Each head is a different framework or version. This is powerful but dangerous. It's generally considered an anti-pattern because modern frameworks are not designed to be bootstrapped together in the same browser tab. It's a solution born of necessity, not convenience.
How it works
A common approach is to wrap each micro frontend in a standard Web Component. The main application, or "shell," uses Module Federation to load the remote code. To display the micro frontend, the shell simply adds a standard HTML tag (e.g., <vue-micro-app>) to the DOM. This abstracts away the framework-specific bootstrapping logic. The Web Component's Shadow DOM can also help isolate CSS styles, preventing conflicts between frameworks.
When to use it
Use this pattern only after ruling out simpler alternatives. It is justifiable in three main scenarios: first, when dealing with large legacy systems that can only be replaced piece by piece; second, during a long-term migration to a new UI framework; third, after a company merger that results in multiple, disparate tech stacks.
When not to use it
Never use this for a greenfield project. If you have the choice, stick to a single framework and version for all your micro frontends. The added complexity, larger bundle sizes, and performance overhead of the multi-framework approach are not worth it without a compelling business constraint forcing your hand.
One canonical example
An enterprise dashboard built in Angular needs to incorporate a new analytics widget built by a recently acquired team that uses React. Instead of rewriting the widget, the React team wraps their app in a Web Component and exposes it via Module Federation. The Angular shell can then load and display the React widget just by adding a custom HTML element, like <react-analytics-widget>, to the page.
Interview question
Under what circumstances is Module Federation for integrating multiple frontend frameworks typically recommended?
- a.As a best practice for all micro frontend architectures to ensure component isolation.
- b.For new projects requiring maximum flexibility in framework selection for each component.
- c.During gradual migrations of legacy systems or after company mergers with disparate tech.Correct
- d.To optimize initial page load times and minimize overall application bundle size.
Why? this is the answer
Module Federation for multi-framework setups is a solution born of necessity, primarily for migrating legacy systems or integrating disparate tech stacks from mergers, not for greenfield projects or performance optimization. It is explicitly stated as not a standard pattern and increases complexity and bundle size.
Just read this? Test yourself on what you have been reading.
Read the original → angulararchitects.io
- #angular
- #micro-frontends
- #module-federation
- #webpack
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles