Efficiently Implement Micro Frontends in Angular with Lazy Loading | Micro Frontend in Angular

hi how you can lazy load your micro front end or web component to your angular application we'll see that in this video hi everyone this is subrath and you are watching fan of your stick so on this channel you will get to know about the programming languages the framework and all about the algorithm so please consider subscribing and hit the Bell icon if you haven't yet in our previous video we discuss about how you can create and web component or micro front end how you can plug that to any HTML file or react or view or angular and some of you might say that this is not the micro front end how it should be implemented I can say somewhat you are right or somewhat you are wrong because microfontent is an architecture how you implement that this is also a way to implement the micro Frontage there are various way you can use to bundle your application and implement the microfontinent nowadays it's pretty Popular by using module Federation and thanks to webpack 5 that helps us to export our component or module to different application and that application can load your microphone and legally which all we going to see in the further videos I will just show you what we have in the previous one just for for a reminder like we we had a micro front end we had an application which you converted to a micro front end in our ng2 bootstrap and you can see it as a angular element as a web component and we are exposing that in our micro front end application in the project so I have started an HTTP server here inside the project and now we'll try to grab that microphone 10 in our new angular base application so this is a application which I have just created it's a normal angular 15 application obviously you can load it how we load it and loaded in the previous video add the script tag add the tag which is app microfe as a tag in your new project and it will going to work but as I promise you we're going to see how you can load that legally so we'll do that and to load lazily there are multiple ways you can import your application and you can import dynamically import the module whenever is needed but what I found is easier is using this package which is from at that angular hyphen extension elements so you can you can see here I will add this link in the description below so you can check that one and it is pretty easy I'll show you so we'll go ahead and install the package so once it's get installed what we can add we can add our micro front end tag which is which we have given as app micro Fe so we'll just grab that here app micro Fe it is showing us error because we don't have a custom element schema and now we'll go to our HTML and here we can add our ax lazy elements and here we can give our URL to our microphone and application so now you can get your micro front end in your angular application but wait we have an error and you can see that we have unexpected token e-sues we haven't imported lazy element after we have imported our module we can see that still we have an error and this is due to our ax LG element is a directive so it's a structural directive this is expecting this as and variable go to app component.ts and here we'll have a URL which will obviously a string so now it will go here here you can add this as an URL we can do npm run start and this will start our server and our server is started now I'll go to the browser and here you can see hi I'm a funded application with some value and now if I'll just try to show you that this is coming from the microphone and I will just add H1 here and if I'll just save here if you see we are getting our fundopuristic and this see we are getting it from the microphone in the network tab if I just write to empty cast and had reload so here as you can see we got our micro fpjs as a separate script I'll just add and div to just to verify you guys that this is loading dynamically so here what I am doing is I am setting the flag to two after two second this is pretty clear and inside this we're just adding flag so that we can see how our micro front end is lazy loaded now just do a empty cache and hard reload and now just keep eye on here you see this component came at the same time our micro fe.js came to the network tab so that proves that it is legitly loaded and you can add it anywhere so for a base application it's pretty easy you can store this URL in the database grab it use that so that's it guys you saw that how you can lazy load your micro front end or web component to your angular application and how easy it is by using our axle IG element directive you can directly load your application wherever you want as I already told before that this is not the only way to implement a macro funded you can Implement your macro content in various way so one of the famous way and one of the efficient way by using model Federation which we're going to see in our future series but this is the easiest way what I thought to me and the before model Federation also you can use this so you you don't need the model Federation to implement your micro front end but as the efficient way because that comes default inside the webpack so try this with your friends let's load your microphone and so that it will help your application to load faster and it will help a user to load application faster smoother and your user will be happy so we'll going to meet in the next video till that stay happy bye bye

Channel: Fun Of Heuristic

Views: 7,130

Keywords: Angular, programming

Id: POUPg9SeEeg

Length: 6min 23sec (383 seconds)

Published: Mon Dec 19 2022