Micro Frontend in Angular with Dynamic Module Federation using NX!

in this video we will see how can use the micro front end using Dynamic model Federation so let's start the video hi everyone this is subrat and you are watching fan of Furious 6 on this channel you will get to know about the programming languages the framework and all about the algorithms so please consider subscribing and hit the Bell icon if you haven't yet if you remember in our last video we have discussed about remote module and local modules so the dynamic modification here is on on the runtime you will decide which remote modules you're gonna Fetch and to the normal application it's just like another route to a lazy loader component that's all and in this video we're going to see how gonna use with NX and the reason of selecting Annex is most of the time if you are creating a microphone application it might be going to be a mono repo and NX angular is built for that you can create a mono repair there are a lot of things available you can go deep onto NX but here NX also gives us model Federation built in you can use modified version as well as Dynamic modified version with NX so to start NX project it's pretty simple I will just show the commands in the screen and you can do it yourself because it's pretty simple I am not going to show you by coding that the first thing is you need to install NX so once you install that you can go ahead and create an NX workspace that is npx create an Xbox space and a workspace name so if you are creating a microphone application you need two things one micro finder and one base application to run that micro front end in terms of NX we call the base application is host so for that you can run this command with is npx nxg at the return X Plus angular colon host and your host name and to create another application which will use as a micro front end will just run the same command but with remote flag on it so it will be like this npm nxg at NX slash angular colon remote and you need to pass your application name and the host our host here is dashboard and you can have multiple host which can have multiple microphone and plugged in so then we'll go to our code then I will show you how things works and what I have done different to make things little efficient so if you see here this is the project created by NX we have created two application one is dashboard and another one is login dashboard is our host and login is our MFS means our micro front end here so when you are starting application as a host or as a remote so what NX is doing is it's adding a model Federation config.js to it so if you open that ignore it for now I will explain this later in the video so for that what is doing is if you remember in our previous video we've discussed about remote modules so you will say my application name is dashboard which is the host application and I will use remote module as login so for this application when login is called it act as a remote module and if you go to the remotes dot d dot TS here you will see that we have declared a module as login slash component but if you start the NS application by default it will be login slash module so why I have given component because I am using Standalone component to expose the component as a micro front end not the module so by default the NX approach is currently as module but I have updated that to use our Standalone component which is quite famous so you don't need to worry about creating modules wrapping them components and all and we all going to see that so one thinks it checked that we have our model Federation config here which is saying that my name and the remote are the login and same login we have expose it here so that when your router trying to access that it will not throw you an error and I will just delete this and I will show you what the error will be similarly if you go to the login here in the login it has created a model Federation and into the remote here it's exposed because our login is exposing the component to the outer world so in this in this scenario to the dashboard so we are saying our name is login and our component which will be exposed AS Slash component if you remember the component we have given it in our remote file remote your TS is component so if you are giving modules here you need to give module here Azure so this is the routing it specify as a micro front end so we are saying if you are accessing to the slash components we'll go to this route say login app entry component and entry component.ts which is this component it's just a standalone component router for for your whole application and that's with don't need because we want to expose the component as a micro front end we don't want to expose the module so thanks to our Standalone component so I have just deleted everything else and I'm just exporting our component directly linking the component to our model Federation file and that's why I like Standalone components it makes our life so easier now coming back to our dashboard so in our dashboard we have already told that remote is the login and in the remote.ts we are saying login.component will point to login our login micro front end and when we're going to use our microphone and as a router in approv.ts we are saying if the path is login then we are we're going to load the component means here we are doing Lazy loading and we are just pointing to login slash component here we have declared that for our remote modules this will be the path and that's why we are not seeing any error here suppose if I'll just change these two components and will you will get error that this is non-recognizable means this is not able to find this module so that's where our remote dot T dot remotes dot d dot TS comes into the picture and we are saying that okay don't worry we'll handle it in the runtime and you just run the application by thinking that this module we have and this is what dynamic Federation is and when we'll start our application you will see that we will able to access the remote component here is the microphone turn through just a route so we'll start the application so for that we'll write npm npx NX server dashboard so I start in the dashboard and we are saying that dab remotes as login so if you have multiple micro front end you can pass multiple application name here as well and it will start both of application like dashboard and login and by default dashboard will runs on 4200 and login will runs on 4100 and if you have multiple micro front end it will be accordingly now I'll go to our application here is already started so I've just refreshed so we have added two URL here and it's also added by default by the NX when I hit login you see that login is loaded and we are able to grab entry component JS file as well and it's not that big this is fine so this is so low because we have a less content it has only Hello login but if you have more content it's just a template file so this is what the power of model Federation and how you can use Dynamic modification to load your application if you are going to develop your application as a micro front end way this is the way you should use model Federation as much as a possible you should use Dynamic modification as much as possible and your application will run very smoothly and handling the projects will also be very smooth now you ask me suprat we had that model Federation supports package sharing like if you have a similar package suppose you have angular 16 in both of your project if a version of application is same and this will be remain same for angular react view whichever Mark you have if it is running on webpack pipe and plus you have model Federation you have Dynamic model Federation so to share your libraries to share your application what you can do it's what I have asked you to ignore in the starting of the video is this base config so what I have done is I have added a model Federation config which you can also find this on the documentation of NX we have also added this one like angular Redux NX ngrx anything you want to use you want to share between your micro front end and your base app then you should do that else your bundle size will be higher if you if you see here we have very few line of JavaScript code because because I have already shared angular with my host as well as the MFS means micro front end so here what we are saying is these are my core libraries and you are saying shared inside said we are checking if the library which is coming inside if it is the code library then you are saying that Singleton is true and we are saying version should be strict and it should load only once that's why Singleton and if it is not we are returning false We'll add this Expo to our both of our model Federation config in our MFE which is login in this scenario we are spreading the config by calling it here and similarly in our base means in our host app we are doing the same thing by spreading our base config so that's what a micro front end using model Federation and that's what a microphone tent using Dynamic model Federation and this is how you can use multiple microphone and use it inside your host app so that you're managing of the project will be smoother because you have divided your different services to different microphone and now different teams can work on them and they can release it independently and when your base app will run it will just goes and get that data on the runtime and render it on the users browser so please go ahead and use micro front end with NX but if you don't want to use NX for some reason then please let me know in the comment section below so that I will try to make an another video how you can use Dynamic model Federation without using NX so that's all for today we're going to meet in the next video till that stay happy bye bye

Channel: Fun Of Heuristic

Views: 6,654

Keywords: Angular, programming

Id: TLiL6EpeWJ4

Length: 11min 7sec (667 seconds)

Published: Wed Jul 12 2023