This demo application demonstrates the possibilities of a Micro-Frontends architecture in combination with the Module Federation technique of Webpack 5.
To see the application in action go to https://mfdemoshell.azurewebsites.net
The application works by dynamically loading in the 2 booking modules into the app shell. You can see this in the MicroFrontendsDemo/shell/src/app/app-routing.module.ts file.
The booking modules are exported angular modules which you can see in the MicroFrontendsDemo/hotel-booking*/webpack.config.js file and in the images above.
The exported modules and their dependencies and imported code can be found in MicroFrontendsDemo/hotel-booking*/src/app/hotelbooking*/hotelbooking*.module.ts file.
"*" For the FlightBooking module change "hotel" to "flight".
Once one of these routes is called the application will import the corresponding booking module with its own dependencies, routes, code, etc. Module Federation helps in sorting and applying the correct dependencies so there are no conflicts.
Because of Module Federation the application is also updated at runtime if a change occurs in one of the booking modules.
Please visit https://mfdemoshell.azurewebsites.net for the working application demo.