DEV Community

Cover image for How to split an Angular app into micro-frontend apps

How to split an Angular app into micro-frontend apps

Michael De Abreu on March 28, 2023

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...
Collapse
 
wgbn profile image
Walter Gandarella

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.

Collapse
 
shacharharshuv profile image
Shachar Har-Shuv

Sadly, this was the first result when I googled "Angular micro front-end"

Collapse
 
michaeljota profile image
Michael De Abreu

Thanks! I wrote another post talking about how to add module federation to this series.

Collapse
 
michaeljota profile image
Michael De Abreu

Hey! Thanks for the suggestion, I think you will find my newest post useful if you want to add Module Federation to this.

Collapse
 
coturiv profile image
coturiv

Exactly, he is talking about the Angular library, and needs more knowledge about the Micro frontend.

Collapse
 
michaeljota profile image
Michael De Abreu

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.

Collapse
 
pbouillon profile image
Pierre Bouillon

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

Collapse
 
quedicesebas profile image
Sebastián Rojas Ricaurte

Waiting for the style sharing party :)... And what about state?

Collapse
 
michaeljota profile image
Michael De Abreu

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. :)

Collapse
 
helloooojoe profile image
Joseph Garza

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.

Collapse
 
michaeljota profile image
Michael De Abreu

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.

Collapse
 
vonsko profile image
vonsko

tbh I ditched builtin angular libraries about two years ago in favor nx. it's way much better in problem solving in decentralized structure