Micro-frontend implementation [part 3] — Angular contains React using Webpack 5 Module Federation
In Micro-frontend implementation [part 2] — Nested React apps, the implementation is straightforward with both host and container apps are React.
In this article, let’s see how an Angular can load a React app and also another Angular app as containers. The Module Federation configurations are almost similar to [part 2].
From the React container app, the whole app is exposed as a component:
Similar to the Angular container app:
And the Angular host app is configured with remote packages from those two remote entry files.
To render a container app, in the Angular host app, I use <router-outlet> as a placeholder so that Angular will dynamically fill in with a child component based on the current router.
// app.component.html
<ul>
<li><a routerLink="">Home</a></li>
<li><a routerLink="childAngular/a">Angular container</a></li>
<li><a routerLink="childReact">React container</a></li>
</ul>
<router-outlet></router-outlet>Those two router links are configured by RouterModule in the app module:
The WrapperComponent is an Angular component that dynamically imports a remote child component and renders it based on a specific router state.
As can be seen, this wrapper is quite abstract doesn’t support propagating states from the host to a container but just rendering. For state binding with a React container, take a look at the React wrapper in [part 1].
Conclusion
I would recommend using Webpack 5 Module Federation plugin when:
- The container apps and the host app use the same frontend framework (and maybe in the same versions as well). For example, nested react apps are easy to configure and propagate states.
- The container apps and the host app are independent in terms of state, and the host renders the container just like an HTML
iframe. This is hard because components usually need to interact with the host app. Biding state between host-container might require a wrapper that introduces a tight coupling.
So, binding states is the key problem to solve, especially between different frameworks.
I also have problems with versioning, in [part 3], I tried to use the latest Angular + React + Webpack but the host got infinite loops when loading a container.
If you’re building a new system and want to go with micro-frontend at the beginning, Webpack 5 Module Federation is worth an investigation.
References
