search

angular-architects / module-federation-plugin

MIT License
730 stars 199 forks source link

Quick question> How to use the mfe remote component in the shell html #151

Open hmendezm opened 2 years ago

hmendezm commented 2 years ago

I have a MFE that exposes a module. This module exports and declare componentX. I want to use this component as in the shell/host Html. I cannot use router because this is a component that always shows in the app.component in the shell MFE. How can I do this?

best HM

dkhrunov commented 2 years ago

I have a MFE that exposes a module. This module exports and declare componentX. I want to use this component as in the shell/host Html. I cannot use router because this is a component that always shows in the app.component in the shell MFE. How can I do this?

best HM

Hi, I have a solution how to load an MFE component directly in HTML, this library https://www.npmjs.com/package/ngx-mfe will help you with this. Use the MfeOutletDirective directive from this library.

What you need is called plugin-based approach, I hope i helped you.

P. S. If you have any questions, then I will be happy to help you, since I am the developer of this library.

hmendezm commented 2 years ago

Cool! Thanks dkhrunov

sathyarajagopal commented 2 years ago

In my usecase, I want to load more than one MFE plugins in my home component using module federation. Is that supported and is there a sample for that?

dkhrunov commented 2 years ago

In my usecase, I want to load more than one MFE plugins in my home component using module federation. Is that supported and is there a sample for that?

Hi, yes you can do that! You just need use two times MfeOutletDirective in your template (HTML). It should be look like this: image

An example above i use *mfeOutlet two times, one for display EntryComponent from "client-dashboard-mfe" app, and second for display NotFoundComponent from "client-fallback-mfe" app.

sathyarajagopal commented 2 years ago

Awesome. Let me try that.

dkhrunov commented 2 years ago

Awesome. Let me try that.

Ok, lets me know if you get some problems. Also, if you get to solve your problem, also write, please!

sathyarajagopal commented 2 years ago

Sure... I didn't get a chance to try that yet. Hoping to do it today.