Implement Micro Frontend in Angular - Explanation and Live Demo
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Learning micro frontend architecture is important in modern applications. Mono repo can become unmaintainable for large complex applications. Today we are going to dive into understanding how Micro-frontend works. and to implement the same.
Tutorial - github.com/angular-architects...
NPM - www.npmjs.com/package/@angula...
Please like, share and subscribe for more content like this. You can follow me and directly ask questions on:
Groups and Pages:
Reddit Community: / theangularcoder
LinkedIn Group: / 13984152
Facebook Page: / theangularcoder
Personal:
Reddit: / gouravgunjan
Dev.to: dev.to/gourav_gunjan
LinkedIn Personal: / gouravgunjan
=== Chapters ===
00:00 - Intro
00:45 - What is Microfrontend
04:40 - Tutorial
05:43 - Initial Setup
06:43 - Adding Micro frontend configs
12:45 - Running Application
14:43 - Increasing Efficiency
19:06 - Conclusion
![[Live] : ONE FIGHT NIGHT 24 วันนี้!! “จาร์เร็ด vs กุสตาโว”](http://i.ytimg.com/vi/ENNA-fsT67c/mqdefault.jpg)
you are amazing!!! THANK YOU!!!!
well explained. thanks.
Love your content!
I would love to see some content on Nx workspaces and best practices around it.
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. ❤️
Really a needed question ..nice bro
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)
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.
thank you
It's great content with a short video. I'm expecting part 2 of the video
Coming soon!
Thank for your explication
Welcome 🙏
Hi Gourav, Do we need to maintain single repositories for all modules, is it possible to have a separate repository for each module?
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.
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
Thank you for this video
My pleasure
@@GouravGunjan can u make video on commonly used rxjs
Great 👌
Thank you
Great video.
What is the VSCode extension you use that shows the types of variables beside it?
Superb bro, Thanks a lot! btw you look like Vijay Sethupathi ;) keep up good work
Thank you!
How can we create build all these multiple app together or run these multi applications simultaneously after build?
Nicely explained brother 😊
So nice of you
Nice Explanation.
Thanks! :)
Really helpful video, thanks for sharing.
Hope you consider making the follow-up video with services in MFE
I am going to upload soon. I am going to use nx, which makes it even easier.
@@GouravGunjan can't wait 😌
I have posted the new video… please check it out
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
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?
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
Really a good one!
Please post ideas to answer. How to design project architecture for UI developer.
Do you want me to cover this topic?
I've got question, how can i deploy it to azure?
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.
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.
can we implement microfontend in Angular 10 project?
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
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.
Great Video, Thank you. I am facing a challenge with 2 different versions of the angular application. Could you do some helpful videos?
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
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
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
Hi Gourav, nice video. Is it possible to communicate between shell and remote and vice versa.
Yes, I have posted other video on this
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 🙂
Sure!
@@GouravGunjan waiting for your Google developer tools course 🙂
DOes this solution works for angular and react ? Meaning can I load a react app inside this angular app ?
I think you can load that. I have loaded react in normal angular.
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
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.
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???
I am not that much into react js. But sure i will try to create something like that
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
As mentioned in other comment. The tutorial link I have shared contain info about creating shared libraries and services.
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.
Great Video. Can you please explain how to deploy and call the respective js files
I have posted this in next video
unable to install node modules
what theme are you using?
I dont think I am using any theme in this project.
At 15:07 line no. 21 I had to use './flights.module' instead of just 'flights.module'
Thanks for feedback.
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.
Hi, thanks for watching the video... I will put this in bucket for future videos...
Waiting for Part 2
Hi, thanks for showing interest. Is there something you would like to focus on second part? :)
Can you provide the reference link also in the description...
I have added the tutorial in description. Do you require something more?
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.
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
Will try to create another video on that.
Also provide how to use store concept in Microfront end architecture
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.
Great video, would be nice to also have a link to source code :)
The tutorial link in description has a repo link.
Good content but please remove any kind of background music. Unable to concentrate and listen properly 🙏
Why so complexity? When its easy to embed a micro ui using an .
Nice content but the music is terribly annoying and distractive.
Oh, okay. I will try to reduce the music even further. I have kept it a -32dB!
voice is not good . pls improve and upload it again
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?