Angular Module Federation microfrontend, bundling web-components

I have a case where in my Angular 17 application:

1. For now I have one standalone component.
2. I have configured microfrontend using Module Federation - it is exposing that single component.
3. I want to create web-component using Angular Elements to import it in 'Framework Agnostic' way in apps other than Angular.

I want to ask what should be the best approach architecting my application :

Approach number 1:

• Separate library for component (and more of them in the future).
• Create separate Angular application - new app in projects folder - that imports component from library builds web component and creates bundle to export to npm or somwhere else.
• Create separate Angular application - new app in projects folder - that imports component from library and exposes that component with Module Federation.

Approach number 2:

Do not create separate library for component. Create shared component in one of those two applications mentioned above and use it directly in both of them.

Approach number 3:

One and single application with component, find a way to create separate bundle for web-components (I didn't found any other way that creating other application and just building that app - it will create bundles with web components). Use that single app also for exposing mfe.

Continue reading...