micro-frontends | A sample app to demo micro frontends in action | Frontend Framework library

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

I am doing some research into the possibility of code splitting a huge monolith SPA (AngularJS) into multiple repositories. Whether we should do it or not? The benefits and pitfalls.

The Idea:

The application consists of multiple features (user management, analytics, event management) which are made as individual angular.module.

The idea was to split these different modules into their own repository and have some kind of master repository which would put all the pieces together before deploying.

The reason

Our application is huge now and will only get bigger. Also, the number of developers working on it is increasing.

Other reasons:

• More manageable and maintainable - only feature specific files available
• Easier to update to newer version of angular - one repo at a time

Findings

I have read that micro frontend architecture is becoming a more and more popular way of structuring big applications.

On the other hand, this will scatter files making it more difficult when fx. refactoring shared modules. It also appears that fx. Facebook and Google have mono repo.

After several days of research, I'm still torn. I see advantages with both, mono repository and multiple repositories.

I have also looked into git submodule as a way to "import" the features into the main repository. This is my least favorite options though. Also, I've never heard of git submodule before now so if anybody has some experience in that area please feel free to jump in.

Finally, the most important question: Is it even possible to have one AngularJS application split into multiple repositories?

Additional information: Microservices: Mono repo vs. multiple repositories