Implement Micro Frontend in Angular - Explanation and Live Demo

hi everyone welcome to angular quadrant today we are going to talk about micro front ends what is micro front end and how we can implement it in a very easy way we are going to use web pack for federation to implement our micro front end in today's example and it is going to be completely live and you will be having a workable demo to show and to work with so let's get started [Music] what is microfrontend is it something you should really know if you are in software industry for some time you must have heard about something called as micro services in beginning a software applications used to come in cds where a single software was written and you you used to run that software in your computer that was a monolith of software which contained ui also and something which run in behind the scenes after some time as with internet advantage or internet came into being your applications are running in your browser which is front-end and back-end is something which runs on the servers consider amazon right in amazon you have different things going on in your web page you have a cart you when you check out your cart you have to do a purchase there is a different section of or group of people who are working on card how to manage card there are different group of people who are working on the search there are different group of people who are working on recommendations which is shown to you at home page micro services means that in back end all these teams or small functionalities all these items which i talked about card recommendations search will be running on different there will be a different application running on it and that is a micro service each service interacts with other to create a application in backend you re you create one request it goes to a controller and that controller need knows where to send that information to that kind of structure was called micro services or is called micro services what does this all has to do with front end front end also if you think about it from amazon's point of view right now if front end if you know in your application most of the organizations have a monolith applic monolith code for front end teams or people who are involved with creating the search bar or maintaining card in amazon will have to make changes and check in in a same code where all other pieces of code represent where recommendation is also present where search is also presented by other things also present so front end is still a monolith and then from for monolith application you are calling to microservices that doesn't give you complete benefit of having modularity or having different teams in first place so for that front end can also be divided into smaller chucks smaller groups which each functional team handles so a functional team will have a little part of team members who are working on front end part of it like search and then a small group of people will be working on back end part of it that will be a micro service together they can work in a better way they can understand requirements better they can have their own goals and features and they can check in their code without involving other teams or other people in this way a organization can perform better how this microfilter works is you have a big application a cell application and these smaller applications are hosted in some other server in runtime compilation or runtime separation what happens is your small piece of code or the segregated functionality is hosted in a server consider local host three or three thousand and then your main application is hosted somewhere else consider at localhost four thousand while runtime when when localhost 4000 is loaded up at that point while runtime dynamically this localhost 4000 will request a piece of localhost 3000 and then so it in their own ui it's like requesting the js file from different servers and then compiling and showing that in a single ui and we are going to implement that today in front of you guys to begin with we are going to use module federation for our implementation module federation is very much technology agnostic it can be used with react vanilla js or your angular application but for our angular application since angular applications is compiled via web pack this makes it as a perfect candidate to quickly implement it and start using in our application and over that i would really like to thank our angular architects who have created a library which makes it really easy to create our micro front-end architecture with angular i will post this link with you in description this is a tutorial which is given by them and we will be going through this and try to implement in our application also along with that there are some things which you have to be careful about some things which you can skip or you i would try to explain what they are trying to do in this tutorial first we will start with including the repo which they are given here we started with loading the application and running npm installed and to show you the application will just run npm start if you can see our application is running and when we click on flights it is saying not implemented yet we'll also run second application which is present in it which is a smaller application where we just have an option to search flights so you can see we have another application which is running here localhost 3000 which has flight search shown here in this application we have two projects a shell is an outer application which is going to host applications from different you would say micro front and basically different servers sell is application which is used for composing so you have these two projects and in this project we have app application and in this we have a routing routing done where we have simply said that if you click on any route which is not written here will simply say not found it is yet to be implemented next thing is we are going to stop our application at both places and then we are going to paste a command you are using ng add and if you remember ng add basically runs the schematics of a certain piece of code these kind of commands run schematics into this so what we are going to do here is whatever port you are using in your application here one thing is important my cell application is running in 4000 ports so i'm writing 4000 and project i'm writing as cell so we have to add this angular architect's web module federation in both your cell and mfe1 so i'm going to add at both places first is cell and i added it and in also my mf e1 project which is running at port 3000 so you can see it made some changes automatically it ran some changes to create the boilerplate code which you will use to make your application as a micro front-end application all together note that webpack config is basically saying how your applications will be compiled web as i told you before webpack is used internally by angular application to compile ts files into a single js file schematics or the change the command which we ran kind of made changes in angular json file if you go to another json file so we can say it is saying extra webpack config it is saying how this our application is going to use a webpack config file out of it now we'll go and see what is present in webpack config so we went into mfe uh mfe microfront and webpack config basically the the project which had flight search component in it and then what we are going to do is we are going to expose that com that flight component thing right in this configuration most of the things are already written as you saw i will just uncomment exposes things so for micro front end you are exposing something and in a shell you are going to use something as called as remotes where you are going to consume something so in this one we are exposing something known as flight dot module and in this application we are going to expose same things flights slash flight start module flash shot module.ts right also make sure make sure to note that all of the angular core angular common angular http and router are basically uh written in such a configuration that it is going to use common code at both projects if you think your two projects have different angular version altogether make sure to set this as uh single strict version as true so that when the information is pulled or when your this micro front edge is pulled or composed in your main cell application it will be running with your its own angular version all together in our cells web pack we are going to say that there is going to be a remote called as mfe1 and that is going to come from localhost 3000 and remote entry.js again just to remind you what this configuration looked like its server hosted at localhost 3000 because in package.json it is written that's what we wrote here and then we have just configured our remote into this one thing which i forgot to wrote right here is basically you have to give name for each of the module which you have which you are exposing here name we are giving as mfe one file which it is going to create is remote entry.js similarly we are pulling from remoteentry.js from our in our host file we will simply remove these comments this is for host and this is for remote basically the place where you are exposing your component from so let's save both files and then continue so we changed both webpack files as a first step after installation of and our module federation now what we'll do in our cell application let me just close this in our cell application we have a routes in routes we are going to load our flights component now from mfe1 we are going to load our flights module which we have written here flights module you remember we in this mf one configuration webpack configuration we wrote flights module here so we are going to load that now if you see this guy is throwing an error saying that mfv1 flights module there isn't any file like that where it is going to come from for that we need to create a d dot ts file so that this basically if you if you don't have angular application and it's a pure vanilla js it will not throw any error but just for ts compilation or resolving this ts error type script error we are going to create a ts file so let me just create that you can give any name you want to this ts file and in this one we are just going to create a dummy definition of a module which will be the same name which we have written here and you see voila this error is going away while run time it will pull from server and this is only for compile time thing this is an extra file which you have to create but as we go forward we will even re remove our dependency from creating these files all together now what we'll do is we'll run the both our cell and micro front end applications so just run let's run that so as you can see our flight 3000 local host is working correctly and let's for just we'll disable cache and reload our application so that it is working correctly with our flight zone here and in our home application also localhost 4000 is working as expected and in network tab we'll just click on flights and we'll just refresh again to see what files are called here in this we'll see that there is something called as remote entry was called as you can see remote entry and this file was called from localhost 3000 and then the flights component which you can see with red dotted line which was loaded in localhost 3000 is now loaded in localhost 4000 in our own application all together so that's the power of having microfrontend in this current state in this current application this cell is having this title bar but this flight distorted line component is coming from a different local host all together now your application is compiled and run during if it is a compiled file it is displayed and composed during runtime this reduces the first of all it will reduce the content delivery network stress on basically eurolocalis 4000 one of the minor benefit but major benefit is that functionality wise a separate team with their it's owned by back end code developers and front-end developers can code on that component and then that component can be simply composed in your ui right now let's go ahead to use more dynamicness in this in your application we have achieved little bit of microfronted architecture but we will go a step ahead and see how we can even have more dynamicness in your application altogether so we can say that this since writing input here we need to create a declaration file instead of that we will be using a different logic altogether so for that let's go ahead and make some changes now making this configuration here then if you think about it needs removes the need to write any remote configuration at all so your component your application becomes more dynamic in nature and webpack config during your webpack was compiled you had written an information where your application is going to pull that mfe one from it was from locals 3000 as you can see here now we are removing this all together while runtime your component will know from your routes basically where that entry is coming from and then will load that component dynamically you can put this in variable you can think about it making it bone dynamic in your case so you can have complete dynamicness in your application altogether after making this change we'll just restart our cell application [Music] so we run our application and we see that our flights is loaded now just be a little bit let's just see once more what is happening here i am loading on my application until that link went with till the time when i have not clicked on flights our remote entry.js file is not called as soon as i click on file then remote entry js was called and that's how and we load our application you can think about the dynamicness in this so we don't even call the server to give us remote increases file until our application is completely loaded or applic the link is clicked but that has its own downside now now this remote entry js file the angular version and other versions already where compiler running in application what will happen if the version is little bit different can it or if it is same the the module federation cannot use complete benefit of having same versions of angular or other things altogether having a common version of that instead of loading this completely dynamic it's advisable not to reload in webpack config we will have the dynamic dynamic entity in our application but we'll put it in somewhere a place where our angular application has yet not started but we can make server calls to pull any server information any basically the path which you want to write and then compile it in one go basically there was a code written in main.ts where your angular application was initialized instead of that we create when we added schematics of angular architects we created a bootstrap test where we moved content from main ps to bootstrap.ts and in main ts we basically are saying that after your application is loaded up you basically you run this file in beginning so instead of simply starting up our application we can make some changes and then say to load all remote entries let's do that [Music] we have made our changes to main.ts file and started compilation it basically said that all the remote entries we are loading in beginning so that version checks and different things which angular is going to use is compared and compiled correctly and then we are if there is any error within that we just simply say catch error and then we basically called bootstrap which was where our angular application starts where the things for angular framework is compiled then we do that after we have loaded all our remote entries so let's go in our application and see what changes this does if we go to our home page and click on to load our application we can see remote entry was pulled in beginning and then simply our component was rendered again that's how we use our remote for our micro front end but there are even more things you can go in that tutorial a service can be created which can be used to communicate between these two that is also possible that is present in tutorial if you want to have that kind of detail maybe i can create a second part of this video well i'll answer your questions if you have any questions please add that in comment please press like if you liked the content of this video and you've enjoyed me talking about angular applications and if you want me to continue creating more videos on angular applications please press that press that like button share and subscribe to your friends and family thank you this is gaurav signing off

Channel: TheAngularCoder || Gourav

Views: 39,650

Keywords: Angular, Angular 12, Angular 11, Angular 10, Angular 8, Angular 4, Angular 2, typescript, tutorial, coding, web, developer, javascript, js, html, css, angularjs

Id: NCFQBRh3hZk

Length: 19min 45sec (1185 seconds)

Published: Sun Mar 13 2022