How to render two micro frontends in the same page

[deepakchethan]

In https://www.youtube.com/watch?v=EzQK0v7xBuE. It was mentioned that we can have multiple micro frontends in the same page.

But I don't see any examples of doing so. Can you please confirm if we can do it without having to rely on splitView

[ndricimrr]

Hi @deepakchethan,
It is possible to do this without having to rely on splitview.
With Luigi this can be done using webcomponent based Microfrontends through the compound configuration option.
Take a look at this FAQ question on our docu to start with:
Can I place a micro frontend within another micro frontend?

We provide an example of this feature in our e2e test application, more specifically at this part of the Luigi config.

[cufos]

Why when i tried to do the same things that you have specified in the example doesn;t work ? The browser shows me always the same error, Failed to resolve module specifier '/sampleapp.html#/webwc'. The base URL is about:blank because import() is called from a CORS-cross-origin scrip. Even if i have the flag validWebcomponentUrls:['.*?'] in the config. How may i solve the problem. Because i did't find any solution.

[ndricimrr]

Hi @cufos ,
This might happen if you are importing Luigi library from an external source (like a CDN). Could you let us know how you are importing the Luigi library in your case.

[cufos]

ah ok so that's the problem, yeah because we're importing the Luigi library from a cdn, thanks.

[cufos]

I have only one question, would i import a microfrontend inside of a web component ? Or there is no way to do that. and sorry to trouble you. thanks.

[hardl]

with luigi compound, you don't import particular micro frontends in the "main" web component but instead define slots (see e.g. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). These slots will then be filled by luigi with the corresponding compound children from your luigi config.

[alexandra-simeonova]

Thank you for your question! I will reopen the discussion so it can serve as future reference in case anyone else has the same question and looks through our Discussions page.