Module federation is a feature available in Webpack that lets you more easily share code among your applications. Your host application will have multiple child applications which are loaded dynamically at run time.

• This means you can benefit from faster load times by only loading parts of the app you need

• Your apps share dependencies so when you load a child app you only download the missing dependencies

• Each child app (*ehem* micro-frontend) is independent so you can make changes and deploy them anytime you want without impacting the other child apps or root app

Most likely you are using Webpack as your Javascript bundler to create your distributable javascript file for your favourite Javascript-flavoured framework so you should be able to start using this feature today.

This article will document a specific use case of how I ran a simple React App inside an Angular Root and vice versa using NX.

NX has some great plugins that make this process very easy - however, it is possible without NX

Running Angular Code In React

todo

Running React Code in Angular

todo

Other material

• https://nx.dev/recipes/angular/dynamic-module-federation-with-angular

• https://webpack.js.org/concepts/module-federation/