DEV Community

Discussion on: Micro Frontend in Angular: Using Module Federation

Collapse
 
gr4vitonn profile image
gr4vitonn • Edited

Hey,

Interesting article. Thank you for sharing.

In your example (and also in the example of Manfred Steyer) the remote (mfe1) is a lazy loaded module defined in mfe1 project.

Would it be possible to load the mfe1 project's app module instead of the lazy loaded module?

The goal would be to:

  • have a host
  • have multiple remotes
  • each remote could have nested routes defined in app-routing.module.ts respectively which could load modules defined in the remote
  • the host should only load the remotes' app.module.ts lazily

I've tried it, but couldn't make it work correctly, because for some reason the remote's app.component.ts didn't run. What it does is that the nested routes are loaded into the router-outlet defined in the host. To fix that, I've added named router outlets but it totally messed up the routing.

Do you have any tip what could go wrong with this approach?

Collapse
 
sbhuvane profile image
Bhuvan Sabarathnam

Hi - There can be only 1 AppModule for an angular application. Hence we are loading feature module from remote.
You can have multiple feature modules in the remote and include them in the host. The feature modules can also have routing module.