Load a Webpack Module-Federated Micro-Frontend in a Native Federated Shell App

[sajay-g]

For which library do you need help?

native-federation, module-federation

Question

Current Stage

• Shell Application: Using Angular 17 with the Module Federation plugin.
• Micro-Frontend (MFE): Using Angular 17 with Module Federation plugin, and React 18 with Module Federation.

Future Stage

• Shell Application: Upgrade to Angular 18 with the Native Federation plugin.
• Micro-Frontend (MFE): Remains on Angular 17 with Module Federation plugin and React 18 with Module Federation.

Questions

• Is achieving the planned future stage feasible with these configurations? If yes, links to relevant samples would be greatly appreciated.
• Should both the Shell and MFE migrate to Native Federation at same time ?

[manfredsteyer]

Hi,

This is a good an important question. The good message is, we can use the Module Federation runtime API to load MF-based Micro Frontends. Hence, we can create a shell that loads Module Federation stuff via this runtime API and Native Federation stuff via Native Federation.

I don't have an example yet -- it's on my list. If you create a prototype, feel free to share the link here.

[sajay-g]

@manfredsteyer The initFederation function is expecting JSON remote entry files, whereas Module Federation uses JS files. Any guidance on this would be appreciated.

[manfredsteyer]

Module Federation, meanwhile, has a separate runtime API. We could use it in addition to Native Federation. This means the shell needs to init both on startup and then it needs to know which remote to load with NF and which to load with MF.

This indirection makes sense in general, as there might also be further ways for providing Micro Frontends.

Please find more info here: https://module-federation.io/

I'm going to work on an official example soon.