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.
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 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 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
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.
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
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.
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.
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 🙂
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???
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
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
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.
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?
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
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
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.
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.
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?
