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

[@unknown-frames]

I am working on prototype of a big project. This is perfect suit for my use case. Thank you do much

[@arkadijxy]

great example !!! thank you

[@123ankit321]

Lovely place. 💯🔥

[@ManuelCaroca-b9k]

Hello! Thank you, it worked very well for me, but I only have one question, if I make a change in the micro-front the base does not detect the change and I have to reload the page. I wanted to try to use HMR so that only the component that I modified is reloaded but it does not work, The base project does not detect microfront changes, can you please help me?

[@FunOfHeuristic]

Unfortunately we can't do hot reloading for this while development, because your base doesn't have any idea about your mfe, deployment. In a mono repo it might be possible to setup. But you can test your mfe independently.

[@ajithajith-rx5xe]

Hi, base app route didn't work properly in ng 17, throw some error as "is not a function"

[@shaibyasandeep]

I am trying to render multiple angular elements(angular-6) on another angular application(shell-Angular -15), but only two of them are rendering ...rest are not defined in shell application, do you have any clue , what could be reason ? I have use the method wch you have shared here .

[@DhruviShah-z6t]

Hi, I used axLazyelement just as you did, but I'm getting this error " Property '"tag"' is incompatible with index signature. Type '{ alias: "axLazyElementDynamic"; required: false; }' is not assignable to type 'string'." Can you please help? Am I missing any configuration ?

[@sanjitmishra]

Nice video, thanks

[@vidhyak1294]

can we implement i18n in microfrontend architecture by sharing translation files ?

[@FunOfHeuristic]

I am not sure about sharing translation file, but you can definitely use i18n through internationalization.

[@mohitborse6096]

Hey Hi dude I watch your video & its very good well explain. I'm trying same custom element in Angular 17 ver in that trying concat 2 files. but its not working. Can you suggest the way how we do that?

[@Gothiqka]

Hello! Thank you so much for this walkthrough. I have used your micro frontend example and am having one difficulty. It appears that the micro frontend is loading properly, but it covers up or hides the app.component.html contents. Any advice here would be greatly appreciated.

[@FunOfHeuristic]

Think your MFE is just like another component, and apply styling accordingly

[@varunkoundal882]

Hi , I am getting corb error while accessing url inside axlazyelement --how to use micro- fe tag when we are not installing or doing anything how will my base project know ,where the micro fe is coming from ..do we need to install it or what ..the video is not complete it dant show how to set up all the things . Only the running part you are showing can you make video regarding issues we face as well ..because I tried everything what you did and it's not at all working I am not even sure how it's working for you

[@FunOfHeuristic]

I have demonstrated how to run it in a previous video. Please check the playlist. In short, you need to host your MFE (Micro Frontend) somewhere so that your base app can access it. Just try running a local server in the directory where your bundle Js is located and provide the path to the base.

[@cristiannass3945]

Thank you for tutorial

[@devNoob-tl1tf]

Hi nice tutorial, im new to MFE. i just have a question, did you do other configuration on the base project? im getting this error the *axLazyElement has to be used on HTML element im guessing the recent project is not imported on the base project. Any thoughts?

[@FunOfHeuristic]

Hello, Thanks In the base app you need to install the package and use *axLazyElement with the tag for you mfe/we component

[@devNoob-tl1tf]

​ @Fun Of Heuristic thanks for your response. I already install the lazyelement, but from the error "has to be used on HTML element", im thinking the mfe1 tag is not exposed to the base app. how did you add the js file of mfe1 to the base app?

[@FunOfHeuristic]

You need to host your mfe1 for example on 3000 port then point to the bundle file of your mfe1 which is hosted on 3000, from your base app.

[@devNoob-tl1tf]

@@FunOfHeuristic hi again, im still figuring out how it shows on the base app, did you add the js file of the MFE1 app on the index.html of the base app? do you have the repository of this project?

[@FunOfHeuristic]

Can you please give your code how you are adding tag, in base app

[@rahulravindran6563]

Hi nice informative video.i have one question, is it possible to share webcomponent between host application and mfe application? If webcomponent is install via npm install and not expose as microfrontend?

[@FunOfHeuristic]

With module federation, you can expose a web component directly from the application, and you can also share the common packages between them. So yes, you can share the web component, but they need to be served from another application; you can also call that MFE.

[@rahulravindran6563]

@@FunOfHeuristic thanks for the response.can you show us some example through a video if possible?

[@FunOfHeuristic]

Ya we will do that in the next series mfe with Module federation, this will solve your issue

[@Sk112aa]

whats the size of loaded MFE's javascript

[@FunOfHeuristic]

In the video it's 130-140 KB, but it can be reduced a lot by sharing common dependency.

[@dipalikamble2143]

Hi, good video, i have one doubt and seeking for help if you can show or share one small example of communication between angular application version5 and angular application version 14 and communicating together with data, as i have such requirement right now, help will be really appreciated as i am quite struggling with angular 5 and 12 connections as microfroend, thanks in advance

[@FunOfHeuristic]

Please check this video kzbin.info/www/bejne/hp3ZhambfayYbq8 You can use the customEvents to do that. Please check and let me know if it's working in both the version or not. It should work because it's not angular dependent.

[@dipalikamble2143]

@@FunOfHeuristic really appreciate your quick replies , one more prob is when i tried to create angular elements with angular version 5 it is not creating micro-fe.js in dist folder i have followed exact steps mentioned by u in video

[@FunOfHeuristic]

ya it will not work for angular 5, because the build process has been changed please check this article for Angular 5 it might work: dzone.com/articles/scaling-micro-frontends-using-angular-elements

[@dipalikamble2143]

@@FunOfHeuristic Thanks again for quick reply, let me try this one , as in bundling i have added all main.bundl.js and so on so it created micro-fe.js file but when i m trying to access it from base app it is giving me 404 for this micro-fe.js file

[@dipalikamble2143]

Hi I have tried calling angular 14 as child app in angular 15 though main.js loading fine , in dome nothing is visible, its not loading on browser, and there is no error, and did vice versa as well calling angular 5 app as child in angular 15 but it is giving error of undefined, can you pls help in this as seeking for help on same topic urgently, appreciated your help

[@codewithghan]

Angular 17 micro frontend ki koi video hai

[@rohitsachdeva4624]

Please add videos which are more descriptive ,with some making application

[@FunOfHeuristic]

Will make a full application with module federation

[@cycdemo4551]

I cannot see micro app in base app... I don't know why I am getting ... Uncaught TypeError: __webpack_require__.r is not a function at 9548 (WebSocketClient.js:50:4) at n (micro-fe.js:1:127) at __webpack_exec__ (zone.js:2741:3) at zone.js:2741:3 at a (micro-fe.js:1:855) at Array.forEach () at micro-fe.js:1:998 at micro-fe.js:1:1058 at micro-fe.js:1:1062