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

Angular elements can be used to create a micro-frontend application in Angular. We can take the help of web components to create a micro front-end application. You can convert your component(s) or the entire application to a micro frontend, which can then be used in multiple locations or in a base application. The main advantage of micro foreground is that it can be developed and integrated into any framework. In this video we have discussed about how we can lazy load our MFE to other angular application.
#mfe #microfrontends #lazyload

Some more playlists:

Equipment used for Video (India links):

00:00 Intro
00:33 Different way to implement micro frontend
01:11 Recap for previous video
01:42 Implement lazy load of MFE
04:00 Demo lazy load of MFE
05:16 Discussion for future video

Thanks for watching...

[unknown-frames]

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

[ManuelCaroca-bk]

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?

[mohitborse]

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?

[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 .

[ajithajith-rxxe]

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

[DhruviShah-zt]

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 ?

[rahulravindran]

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?

[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.

[vidhyak]

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

[varunkoundal]

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

[devNoob-tltf]

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?

[rohitsachdeva]

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

[dipalikamble]

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

[Skaa]

whats the size of loaded MFE's javascript

[codewithghan]

Angular 17 micro frontend ki koi video hai

[cycdemo]

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 (<anonymous>)
at micro-fe.js:1:998
at micro-fe.js:1:1058
at micro-fe.js:1:1062