search

angular-architects / module-federation-plugin

MIT License
730 stars 202 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 months ago

baroudihassan commented 2 months 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 months 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 months 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!