Hi. It's been a while. I hope you are doing great these days. Today, I want to show you something I've been playing with recently.
In this modern...
For further actions, you may consider blocking this person and/or reporting abuse
I confess that I was a little frustrated with the end of the article, because without using module fereration this is simply not a micro-frontend!
What he did was basically create libraries (including the login app could easily have been a common library, because it is possible to export modules with their own routes inside a lib).
In the end, it's all still part of a single build/deploy.
I agree that the code is more organized, but this is precisely the concept of libraries, not micro-frontend.
A micro-frontend is expected to be independent even in its deployment. App A is deployed on host A, app B is deployed on host B, however, app B can be called and integrated into app A through module federation, including sharing state. The big advantage is that changes and deploys of app B are made without changing anything or deploying in app A.
Sadly, this was the first result when I googled "Angular micro front-end"
Thanks! I wrote another post talking about how to add module federation to this series.
How to add Module Federation into your Angular micro-frontend apps
Michael De Abreu ・ Oct 18
Hey! Thanks for the suggestion, I think you will find my newest post useful if you want to add Module Federation to this.
How to add Module Federation into your Angular micro-frontend apps
Michael De Abreu ・ Oct 18
Exactly, he is talking about the Angular library, and needs more knowledge about the Micro frontend.
Hi! Sorry for the delay. You are right, this is the first step to migrate the app over to a micro-frontend approach and I didn't get to the actual micro-frontend. However, you will find the follow-up post useful if you want to add module federation to this project.
How to add Module Federation into your Angular micro-frontend apps
Michael De Abreu ・ Oct 18
Thanks a lot for this article! Micro frontends is a concept that I find hard to get started but with this step by step explanation it sure is a lot clearer
Waiting for the style sharing party :)... And what about state?
You can see in this example we are sharing the Auth Service between the apps. By using a self registered service at root the state of the service will be shared. I'll give a comment when the shared styles is ready. :)
Using module federation, how would you create a microfrontend in Angular app A and load it into legacy app B's HTML? I went about using Angular Elements to creator a custom web element.
I guess it depends on what exactly you want to end with. Angular Elements can help you sharing components and that, but I guess sharing state is where things can get tricky. Someone else asked about integrating something like this with Meteor, that would behave the same as your legacy HTML app. Maybe I create a post about it. I'll let you know.
tbh I ditched builtin angular libraries about two years ago in favor nx. it's way much better in problem solving in decentralized structure