Implement Micro Frontend in Angular - Explanation and Live Demo

[@sivavinod3614]

It's great content with a short video. I'm expecting part 2 of the video

[@GouravGunjan]

Coming soon!

[@ajmalali1875]

Love your content! I would love to see some content on Nx workspaces and best practices around it.

[@GouravGunjan]

Will put that in the list! I haven’t used nx workspaces much… but have checked it out a bit. Would need to do some homework before creating a video on that… But be assured. I will make one video on that. ❤️

[@kishorekumarlakshmanan]

Really a needed question ..nice bro

[@vinothini15]

This was really a good explanation. Here you have explained about MicroFrontends and how it is consumed by the host in MonoRepository. It will be great if you explain how this micro font end can be injected in a host which is totally lying in different repository(may be in a separate video or please direct me if you have one already)

[@GouravGunjan]

HI Vinothini, I have given example of a mono repo, but the deployment is done separately. You can simply put these two projects in different repos and deploy it separately. It would work similarly.

[@nandanreddy]

Great video. What is the VSCode extension you use that shows the types of variables beside it?

[@RajeshKumar-gr6xx]

Really a good one! Please post ideas to answer. How to design project architecture for UI developer.

[@GouravGunjan]

Do you want me to cover this topic?

[@lalatenduguru8121]

Superb bro, Thanks a lot! btw you look like Vijay Sethupathi ;) keep up good work

[@GouravGunjan]

Thank you!

[@KrishDunn-yy1jz]

Great Video, Thank you. I am facing a challenge with 2 different versions of the angular application. Could you do some helpful videos?

[@Iam_AndersonP]

Great explanation, it would be helfull to know a way to use external components inside a template, so that way we can hace multiple micro frontentd inside a page like if the where local components

[@Feefor]

Really helpful video, thanks for sharing. Hope you consider making the follow-up video with services in MFE

[@GouravGunjan]

I am going to upload soon. I am going to use nx, which makes it even easier.

[@abhaythakur8572]

@@GouravGunjan can't wait 😌

[@GouravGunjan]

I have posted the new video… please check it out

[@purnimakamble9481]

Really good explanation..can you please make a one video on how can we share assets in microfront components. Also font integration and scss integration

[@GouravGunjan]

I think a separate static location can be used for the same. In current organisation we have just implemented that. A separate repo which deploys its static content to a s3 aws bucket. Our code (which gets deployed to another bucket) pulls static content and shows it in it.

[@alkanath]

you are amazing!!! THANK YOU!!!!

[@saurabhgupta4155]

Hi @GouravGunjan, In this approach we still not maintaining code base separately for different apps as we do in micro-service architecture. Is it the best practice we follow or we have any further approach to maintain different code base for different apps.

[@boriscissoko2865]

Thank for your explication

[@GouravGunjan]

Welcome 🙏

[@javascript_developer]

well explained. thanks.

[@ganapathirao9573]

Good Explanation. I have one question, you loaded external module from 'localhost:3000' but what incase of deployment? we need to replace with which url here? Please explain

[@GouravGunjan]

Yes, you have to use the dns address here. Like if your component is hosted in xyz.com/componentRepo/componentX, you have use this address

[@techproductowner]

wonderful Sir for this , I have a basic question , earlier there use to be some UI code which is common , so those common code when we migrate to mfe style . .do we need to write the common code in all respective mfe ? will it not impact the reuse of common code in this style . . I am missing someting pls guide

[@mohammedfahimullah4999]

Thank you for this video

[@GouravGunjan]

My pleasure

[@mohammedfahimullah4999]

@@GouravGunjan can u make video on commonly used rxjs

[@nsureshingo]

Hi Gourav, Do we need to maintain single repositories for all modules, is it possible to have a separate repository for each module?

[@AhmedMubarakZ]

thank you

[@sskrishna2711]

Hi Gourav, nice video. Is it possible to communicate between shell and remote and vice versa.

[@GouravGunjan]

Yes, I have posted other video on this

[@arunkumarprasath2671]

Great Video. Can you please explain how to deploy and call the respective js files

[@GouravGunjan]

I have posted this in next video

[@vasistan]

Nicely explained brother 😊

[@GouravGunjan]

So nice of you

[@rajathvenkatesh3253]

routing between two micro front end does not even work. (from MFE1 to MFE2 and vice versa) routing works only between shell and micro front end. Any suggestions?

[@srihitha4721]

DOes this solution works for angular and react ? Meaning can I load a react app inside this angular app ?

[@GouravGunjan]

I think you can load that. I have loaded react in normal angular.

[@vikramrajpurohit2225]

How can we create build all these multiple app together or run these multi applications simultaneously after build?

[@athero02yt3]

I've got question, how can i deploy it to azure?

[@HariKrishnan-bz7jz]

Nice Explanation.

[@GouravGunjan]

Thanks! :)

[@kishorekumarlakshmanan]

Video was really useful and can you say about libraries, services and interceptors used in this micro front end architecture using angular and then how to maintain the state of the application and also say till deployment of the application using GCP

[@GouravGunjan]

As mentioned in other comment. The tutorial link I have shared contain info about creating shared libraries and services.

[@GouravGunjan]

I am not sure about deployment to GCP. But as you might be aware you need to serve both micro apps in same domain. So that you don’t run into cors issue.

[@arsh3248]

Thanks for the detailed explanation Also currently you have used a component through routing Please explain how will i add a mfe1 component as a child component in a shell app component

[@GouravGunjan]

Hi Arsh, you can add a child component which can use routing to dynamically inject component. I am not sure yet if you can inject components directly. However, I saw there is away to expose a component - I didnt try doing it yet.

[@GautamGuptam]

Great 👌

[@GouravGunjan]

Thank you

[@itscodingbere]

Thank you so much for this informative video i got a lot to learn from that ❤ I have some doubts. can you please tell how can i connect with you

[@hk_build]

Thanks for great content!! Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???

[@GouravGunjan]

I am not that much into react js. But sure i will try to create something like that

[@santhoshgnanasekaran8272]

Good explanation but need some more depth explanation in coding perspective. When we directly looking at the code not able to understand mfe1 and shell.. just need some explanation on that

[@GouravGunjan]

Will try to create another video on that.

[@ganapathilana7069]

Hi, It's awesome post. Can you provide the shell and mfe1 from scratch. Also post the communication between mfe's and mfe to shell thanks advance.

[@GouravGunjan]

Hi, thanks for watching the video... I will put this in bucket for future videos...

[@supriyabiradar6297]

can you please share schematic to create new MFE within project , as in code there is shell and mfe1, and I want to add new mfe2, also is there any possibility about lazy loading for these MFE, kindly please guide

[@ashitashukla4714]

Hi, thanks for the explaination, my query is regarding is it possible achieve single spa of MF1 of AngularJs and MF2 Angular 9+ in vanilla JS root container or something like root-container will be Angular 10 or 13 and exposed MF's ie. AngularJs and Angular 2+ ? If it is possible please help to understand.

[@GouravGunjan]

Yes. It is possible. In the framework mentioned in the video, there is configuration done, where remote component can be exposed with its own framework.

[@claudit13]

can we implement microfontend in Angular 10 project?

[@kishorekumarlakshmanan]

Also provide how to use store concept in Microfront end architecture

[@GouravGunjan]

In the tutorial link I have provided, if you go last section. You can see that singleton instance of a service is shared across micro apps. That can be used as store.

[@AviatorBro]

Hi Sir, I have been learning a lot through your Angular videos. Just a small request , can you please make a video series on how to make use of Google Developer tools from basics to advance, so that it give us thorough information and help us become a better frontend developer. Thanks in advance 🙂

[@GouravGunjan]

Sure!

[@AviatorBro]

@@GouravGunjan waiting for your Google developer tools course 🙂

[@theisaacmoses]

Waiting for Part 2

[@GouravGunjan]

Hi, thanks for showing interest. Is there something you would like to focus on second part? :)

[@kishorekumarlakshmanan]

Can you provide the reference link also in the description...

[@GouravGunjan]

I have added the tutorial in description. Do you require something more?

[@kishorekumarlakshmanan]

Yes bro , am new to micro front end , waiting for your reply....also make videos for deployment using docker in GCP and if possible add some git videos bro.

[@javascript_developer]

At 15:07 line no. 21 I had to use './flights.module' instead of just 'flights.module'

[@GouravGunjan]

Thanks for feedback.

[@praveensc522]

unable to install node modules

[@sqb8980]

Please share full code

[@adrianmechatovalencia5796]

what theme are you using?

[@GouravGunjan]

I dont think I am using any theme in this project.

[@domantasg7660]

Great video, would be nice to also have a link to source code :)

[@GouravGunjan]

The tutorial link in description has a repo link.

[@hamlovingprophetpisslam183]

Why so complexity? When its easy to embed a micro ui using an .

[@srushtidaware7978]

Good content but please remove any kind of background music. Unable to concentrate and listen properly 🙏

[@francismcguire6884]

Nice content but the music is terribly annoying and distractive.

[@GouravGunjan]

Oh, okay. I will try to reduce the music even further. I have kept it a -32dB!

[@avanishkumar1689]

voice is not good . pls improve and upload it again

[@davidalonsogarciapariona4655]

I have error when I try to execute the comand npm install, It gives the following message: hile resolving: karma-jasmine-html-reporter@1.6.0 npm ERR! Found: jasmine-core@3.6.0 npm ERR! node_modules/jasmine-core npm ERR! dev jasmine-core@"~3.6.0" from the root project npm ERR! jasmine-core@"^3.6.0" from karma-jasmine@4.0.1 npm ERR! node_modules/karma-jasmine npm ERR! dev karma-jasmine@"~4.0.0" from the root project npm ERR! peer karma-jasmine@">=1.1" from karma-jasmine-html-reporter@1.6.0 npm ERR! node_modules/karma-jasmine-html-reporter npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project and more... by the way, i have installled the same version as the proyect, angular 14. how could i solve this error?