Micro Frontends - NX and Module Federation

[@miervaldis42]

Great content Can you next time create micro-frontends with Nx but from an empty monorepo and use the plugins to set all the stack in place ? Because it is kind of difficult to connect the different elements when it is from scratch 😅

[@armandobarbozaojeda6006]

Is there some example of angular projects in different repos? I was thinking in having distributed projects but compiled them and have a models server serving only the modules/components and the same server serving the angular shell app, what do you think?

[@russellcanfield]

Yes absolutely, if you can put them on a CDN that is ideal. As far as loading them from a URL, there should be support through webpack as-is if you provide it at build time. If you want them dynamic from a configuration type service, you may need to check the official examples repo

[@vip_food]

Can you load an angular app inside a react shell application? I tried and received the component, but didnot work.

[@russellcanfield]

I believe you could, there would need to be specialized mounting code that runs before your components attempt to render

[@Boo-wd1ov]

Can you recommend me some Microfrontend using Angular course or any YT playlist. Im very new to angular and this mfe architecture.

[@commanderj9022]

Excellent video bro. I followed all the steps but my remote keeps timing out. It runs when I run the remote but the host fails. Is there a way I can connect with you and show you? I’m in Los Angeles California

[@russellcanfield]

Thanks! So the host tries to load the remote but it never loads it? Can you see the network request in the browser?

[@admiralicic]

Great content thank you. Just a small suggestion regarding the screen, if you could zoom in a little bit so that people watching on the phone can follow❤

[@russellcanfield]

Thanks! Absolutely, I will keep that in mind

[@Ernuna]

Hi Russell, thanks for such a great videos. When we have such decoupled mf-s, is there a recommended approach on handling feature flags for each mf as well as for host? for host it needs to decide which mf to show and for mf it needs to hide some UI parts.

[@russellcanfield]

If you just need the host to decide which MF to show you can use a sort of configuration service. You could use feature flags and do more advanced scenarios like claims based, etc. For the remote, you can use a similar approach.

[@Dadaadad268]

Hi Russell, I'm using Turborepo to contain my micro frontends. From what I can see, I don't need to use Module Federation in order for this to work. Is there a reason you combine NX with Module Federation?

[@russellcanfield]

Do you mean you don’t need to use NX for this to work? NX is just a monorepo tool, it has some tooling for Module Federation but isn’t required

[@Dadaadad268]

@@russellcanfieldAh yeah I wanted to see if module federation was needed for micro front-ends to work. And I'm thinking of using TurboRepo. Although NX maybe better?!

[@russellcanfield]

Module Federation is one approach, you could use other approaches or frameworks like SingleSPA, my preference is Module Federation though. NX might be a great fit :) I think it's a more open ecosystem where you can use a number of tools within it.@@Dadaadad268

[@Dadaadad268]

@@russellcanfield thanks for getting back to me. I've basically implemented a mono repo with multiple vite apps (not 'single-spa' ) and am routing between them by simply lazy loading the apps in for the router to use. It seems to work but I'm concerned I'm missing something important by not using mod Federation or 'single-spa-react' apps. Hope this makes sense!

[@russellcanfield]

So federation/SingleSPA will allow you to run these modules at runtime from remote locations not just locally on the filesystem. This pattern can be helpful for large teams and separating team dependencies by independently releasing pieces of the application@@Dadaadad268

[@GunjanKumar-f8n]

Hi Russell, In my angular microfrontend project i have migrated to newer version of NX, now i am getting weird issue , any help would be apricated, I could not get any valid response on internet Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../". core.mjs:31064 Angular is running in development mode. app.module.ts:18 ERROR ChunkLoadError at __webpack_require__.f.j (jsonp chunk loading:27:1) at ensure chunk:6:1 at Array.reduce () at __webpack_require__.e (ensure chunk:5:1) at Object.loadChildren (app.module.ts:18:26) at loadChildren (router.mjs:4365:37) at RouterConfigLoader.loadChildren (router.mjs:4340:40) at router.mjs:4029:46 at doInnerSub (mergeInternals.js:19:19) at outerNext (mergeInternals.js:14:57)