Micro Frontend in Angular with Dynamic Module Federation using NX!

[@LogUp-uf1th]

really great explanation, Thanks! I tried various sources and videos before stumbling upon your video, almost gave up learning what Microfrontend is. Now it's really clear and easy to understand!

[@VivekSharma24290]

Subrat, Can you also make a video on how to load a remote module without using routing technique from NX. We can use the component way to load the module. Also, can you also cover on how to load environment specific files, like config.json/config.dev.json etc of the remote module from host application. Thank You.

[@FunOfHeuristic]

Yes, soon

[@sakarsr]

Thank you for making this video on Micro Frontend. Just tell us how to deploy Micro Froent end to serve. Do we have to deploy each microfronter to a different server?

[@FunOfHeuristic]

Yes we should deploy each MFE separately.

[@AbdulRahim-lc6yb]

hi, your presentation is good, can you make a video how to dockerize angular micro frontends

[@remiguillard3773]

Is this possible to make a video to make a shared auth ngrx store between mfe ?

[@SatyamSoni1990]

can custom event be used for communication between components?

[@readerguide2885]

Will "ngx-build-plus": "^14.0.0", be in its package.json

[@ИванКудря-ь3ш]

Great explanation, thank you! I have a question. How can I use module federation to combine several applications on the same route in the shell app. I would like to create a page with three mfe applications inside.

[@ИванКудря-ь3ш]

Found the answer in your another vid, thank you

[@transformerduncan]

If I want to add ngrx to the remote app how would I configure this? When I try to create the rootstore in the remote app and the feature store in a library, the store fails to be injected

[@FunOfHeuristic]

You should use the root store in the shell/host app and feature store in your remote app then it should work.

[@transformerduncan]

@@FunOfHeuristic Although for local testing I have a dev-shell. For production I will not be managing the shell and my org is not quite there in terms of actually leveraging a full monorepo. I know others are searching for this answer but no one has done this. If you could do a video on how to register the rootstore on the entry component of a remote app I will be sure to send the video to everyone at my organization (100,000)+ people.

[@FunOfHeuristic]

Thanks for the kind message let me try to do it.

[@transformerduncan]

Any luck??@@FunOfHeuristic

[@krishnakumar-n6h]

Hi Subrat, Can we use module federation with Angular 10 or lower versions? I have an existing mono repo app which i need to convert into MFE. Please suggest.

[@FunOfHeuristic]

Yes if you are using webpack 5 which is the case for angular 10 you can use module federation, As Module federation is a concept of webpack not angular.

[@GiacTucc]

I have an error and I can't figure out why, i cloned your code, the error is : \entry.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. Can you help me?

[@fuchengnian3299]

add "src/**/*.ts", at include area file=> micro-frontend-dynamic-module-federation\login\tsconfig.app.json

[@codehan]

How would you implement module federation to expose the whole app as well es single components of that app? Is this possible with a standalone NX repository with a single Angular/React app? The remote should be in a separate standalone repo and the host in another standalone repo. It should be possible that the host comsumes the remote micro frontend as well es the remote micro components.

[@FunOfHeuristic]

Hey @codehan, absolutely, it's totally doable! When you expose a micro frontend, you're essentially sharing specific components. These components might have their own child components linked to them. Now, when it comes to exposing, you have options. You can either expose each component individually, or you can wrap them up with a parent component and expose the entire application. As for developing the application in different repositories, yup, that's possible too. While a monorepo aids in development, when it comes to deployment, you're looking at two distinct applications. So, yes it's absolutely possible

[@codehan]

Thanks for you reply :) Currently we expose our react app (the App.tsx) wrapped as a web component as described by Manfred Steyer, since this is the only way to consume the react app within the Angular host. But now single components needed as well and the question is how to expose them as web components as well. Currently a single remoteEntry.js is generated and used in a complex way within the Angular shell. I assume that this remoteEntry.js also includes the single components then. Currently thinking about (somehow) generating multiple remoteEntry files. One for the entire app and one for the needed components. Im not sure if Nx allows non libs to be exposed that easy..

[@athero02yt3]

Hi, how can i deploy mfs to azure?

[@kavyashreebj5848]

Thanks a lot for the video! Since we have a single package.json file and a single node_modules folder at root level that is shared, is it not a monorepo architecture? And if I need to install a package for one application only, is it possible?

[@FunOfHeuristic]

Yes, it's a monorepo. If you install any packages that won't be added to every app, they will only be included in the build file of your app if you are using them. As a result, you can deploy each app independently.

[@kavyashreebj5848]

@@FunOfHeuristic Thanks for the response! So is this mono repo and micro frontend? Or just monorepo? To call an angular app as micro front end, should we mandatorily have angular elements like you had in previous videos?

[@FunOfHeuristic]

The best way is by using Module Federation. In the previous videos, I used Angular Elements, which is another approach to achieve microfrontends. In most scenarios, you will likely use the Module Federation approach, but if you want to expose a CSS component library, then the Angular Elements way will be better

[@kavyashreebj5848]

@@FunOfHeuristic that makes sense. Would love to see more of such videos. Thanks for the detailed explanation 🙂

[@rutujagholap7055]

Hello subrat, thank you for videoes. I have a question, I have already one project in angular and I would like to create a new project and use that new project as MFE inside my old project. How should I proceed?

[@FunOfHeuristic]

You can convert your project to nx and can continue as shown in the video or you can use @angular-architects/module-federation with your old application, this package is kind of similar to what we have in video. If it's hard to understand let me know I will make a video for this.

[@FunOfHeuristic]

Both use module federation, you can check my video on dynamic model federation it's already out.

[@tanmaydey3448]

How to build the micro frontend for production