search

angular-architects / module-federation-plugin

MIT License
714 stars 191 forks source link

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

Open baroudihassan opened 2 weeks ago

baroudihassan commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

@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!