Load a Remote Angular 12 App with Module Federation into a Shell with Angular 18 and Native Federation

[baroudihassan]

How can I load a remote Angular 12 app, exposed using Module Federation, into a shell app created with Angular 18 that uses Native Federation? I encountered an issue where Native Federation expects a remoteEntry.json, but the remote app exposes a remoteEntry.js.

[tonybrasunas-greenlots]

If you're going to use a different Angular version in the MFE than in the Shell, you're loading two versions of Angular into the browser at once. This is an antipattern and not recommended unless absolutely necessary.

If it's necessary, follow the Native Federation guide here for wrapping each MFE into a Web Component: https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components/

[baroudihassan]

@tonybrasunas-greenlots Thanks for your answer. Yes, I followed the guide, but the issue is that in an Angular 12 app, we use module federation, which exports the remoteEntry as a JS file. However, in the shell app, which is built with Angular 18 using Native Federation, we expect a remoteEntry as a JSON file. This incompatibility is causing the shell app to fail to load the remote!

[Tungsten78]

I have also been looking to understand if interop is possible between native federation and other module federation frameworks.

Best I've found:

• use both runtime apis at same time - Load a Webpack Module-Federated Micro-Frontend in a Native Federated Shell App #682 (comment)
• "not possible" mentioned in native federation and module federation #385 (comment)

We need something that works with Angular+esbuild (Native Federation works great), but we have a requirement to use these MFEs in an older legacy Vue based app. The vite plugin looks to have been abandoned in favor of Module Federation 2.0?