The Microfrontend Revolution: Using Webpack 5 Module Federation with Angular | Manfred Steyer

The implementation of microfrontends has so far been anything but easy. Since common frameworks and build tools did not even know this idea, you had to dig into the bag of tricks.

Module Federation offered by Webpack 5 initiates a crucial change of direction here. It allows you to load separately compiled applications at runtime and to share libraries between them.

In this session you will learn how you can use this mechanism to create microfrontends with Angular. In addition to the happy day scenarios, we also discuss pitfalls and approaches to avoid them. Furthermore, we take a look at possible alternatives.

At the end of the session you have an overview of the topic and know how you can use Module Federation in your projects and what the consequences are.

Speaker: Manfred Steyer

[lmstdn]

this video is the most beautiful thing I've seen this year. Thanks for explaining module federation in angular

[rhinavlad]

Great explanation @Manfred. Is there any example of standalone Angular components which are rendered on the same route? I only found one component per route, but what if we have case when we want to render multiple MFE-s which are actually standalone components - but on the same route?

[marhen]

Great @Manfred. Is it possible resilient header and footer on shell, just call loadChildren with another and header and footer default for all?

[BenRacicot]

What a great explanation.
Can we get references for the first Q/A? 41:06
"The Angular team gaurantees component compiled with version N still works with version N+1"

[vsh-torch]

Very good explanation. Patience is a Gift. Agree :)

[Vinod]

Can you please explain more about public path and assets sharing

[emanuelcassimiro]

How does it works for production.
For production we need to set other urls besides localhost. Is there any way of doing this? Because we need to build the application, depoy it to test, and then move it to production, if we hard code the urls it will break

[maneeshthareja]

I am looking some help to create an architecture where we can migrate the existing Angular 11 monolith application into small independent self compiled build with the help of moudle federation and load those remote apps on demand at run time. In this migration we want to provide scalabilty and high availability for our end users hence we are thinking to deploy 4 instances of Shell Module and 4 instances of each remote module running on different containers.

Whenever end user will try to load our app then with the help of load balancer it will load the available shell module and then shell app will load the remote modules running on different containers. Now the question here is that if we have multiple instances of remote modules which are running on different conatiners then can we put another load balancer between shell module app and remote module app so that we can load remote modules as well as per their availability?

It would be really help if somebody has done that in past or interested to do the same with me. Thanks in advance for showing interest on this interesting idea.

Thanks
Maneesh

[stevenrankin]

I am interested in using module federation for a new project, however I am struggling with the idea of web components and how they would be used or fit in conjunction with module federation. I am pretty new to the UI space having been a backend developer for pretty much all my years.
If I had a shell app, I could import a child web component (or even an entire app) by importing the web component js from its deployed path.
But I could also do the same with module federation and webpack?
Could someone help me understand why one would use both, or would you pick one solution, or do they work together? I am finding it hard to conceptually differentiate between the two. Ideally I want to be able to compose some MFEs with in shell/host app, with apps built by other teams.

[rajathvenkatesh]

I am looking to share services and make them as singletons to be used between my shell and micro front ends in angular.
I use angular architects module federation!
I have multi repo MFEs so NX share libraries would not be a good option.
Any advise?

[pradeepgorai]

Could you please share video tutorial in module federation where react as MF and angular as container

[RanjithKumar-qjmn]

loadManifest for nested microservice front end is not loading ex shell loadsmanifest --->mfe1 loadsmanifest ---->mfe2 but mfe1 cannot bootstrap manifest file

[kamalshaik]

How to transfer data between diffent projects in module federation angular projects??

[Vinod]

How do we load assets which were used in remote module to shell?

[Chillouttrance]

All your videos contains same stuff, nothing different. There are more issues like how to load assets of microfrontend in shell application. No update of those stuff