micro-frontends | extending the microservice paradigms to web development | Microservice library

I'm building an app with micro-frontends using webpack 5's module federation plugin. Everything was fine until I started adding react hooks into my remote app. At that point I received errors about "invalid usage of hooks", i.e. I discovered I had TWO versions of react loaded, one from the remote and one from the app consuming the remote.

That problem was solved by adding a shared key to the ModuleFederationPlugin section of my webpack config that marked React as a singleton. Now everything compiles and seems to run just fine.

However, the webpack compiler is throwing some annoying warnings at me now. Its saying:

I've been creating a micro-frontend project and the glue (nginx) isn't working as expected.

My projects are structured as such:

I'm using Angular with Webpack 5 Module Federation for micro-frontends. I have 2 apps (let's call them app1 and app2) and my main app, app1, is federating components of app2.

In app2, my exposed components are exported by my main module, so when I try to federate some component, I can get it from the export section of my module. Everything works fine in dev mode, I can get my exposed module, retrieve my exported components and then use the component factory resolver to create it where I want in app1.

But when I build in production (I used ng serve --prod to reproduce the prod environment and test it) my exported components are gone but not the imports and providers. This is the module I get:

The stack is way too complicated to recreate it, so forgive me in advance and ask me for further information.

The Angular app has the following structure:

I am investigating Micro-Frontend possibilities with Angular. I am looking into the feasibility of having independently the different parts of the UI served by their own HTTP server process but composed dynamically on the main UI; which is merely a UI template with placeholders to be replaced by these dynamically loaded Micro-Frontends.

Currently we are using iframes for this and it works great apart from the extra resources required on the client browser and of course the not so dynamic and limited approach.

My question is if it is possible to have a component in an Angular App implementing a shared and well-known component interface, be loaded dynamically from another URL; subdomain in our case?

For example, we have the following domains:

1. domain.com
2. sub1.domain.com
3. sub2.domain.com

and we have the following component available from sub1.domain.com:

I'm trying to figured out if it's possible share LESS variables among different React projects. I'm using Single-SPA to build a micro-frontends architecture. My micro-frontends are using some shared components like the react-microfrontend example does with react-mf/styleguide. Beside that, I also need to share some LESS variables (e.g. colors or typography) so I can just define them once into my styleguide project alike and then reference them in every micro-frontends I will define. Is that possible ? If yes, can you suggest to me a way to do that ? I guess the solution is to use webpack but I can't find the right way to do it.

Recently our team has decided to implement micro front end architecture in our legacy product. It has been developed using Asp.Net aspx pages along with javascript/jquery.

Last year we started using angular in our application for some of the views. To load angular we are placing the prod build files in .net project and we are loading the component in aspx master page.

We are planning to migrate our rest pending older views to angular using micro front end architecture.

So I did a small poc for the same and was able to achieve the architecture to somewhere close to it.

I followed this url for implementation and ran it on port 4400.

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

And in my existing angular project i am loading this using customElements