Dynamic Federation for Registration using Module Federation

 In our previous implementation we had tried the hard code registration of Module federation i.e. remote is hardcodely register to HostApp.

https://siddharathadhumale.blogspot.com/2024/02/microfrontend-microservices-for-frontend.html

In this blog we will try to the same using dynamic federation. For that we have to make following changes in the apps.

1- change webpack.config.js of hostApp as given below

1 2 3 4 5

remotes: {  // "mfe1": "http://localhost:3000/remoteEntry.js",  //"remote1" : "http://localhost:4001/remoteEntry.js", },

2- Update app.routes.ts of hostapp as given below.

1 2 3 4 5 6 7 8 9 10

path:'remote1',     // loadChildren: () => import('remote1/PurchaseModule')     // then(m => m.PurchaseModule)     loadChildren: () =>            loadRemoteModule({               type: 'module',               remoteEntry: 'http://localhost:4001/remoteEntry.js',               exposedModule: './PurchaseModule'           })           .then(m => m.PurchaseModule)

3- Finally Loading Meta Data Upfront update main.ts of hostApp like given below

1 2 3 4 5 6 7 8 9 10 11 12

//import('./bootstrap') .catch(err => console.error(err)); import { loadRemoteEntry } from '@angular-architects/module-federation';   Promise.all([   loadRemoteEntry({     type: 'module',     remoteEntry: 'http://localhost:4001/remoteEntry.js',   }), ])   .catch((err) => console.error('Error loading remote entries', err))   .then(() => import('./bootstrap'))   .catch((err) => console.error(err));

Now restart the hostapp and remote1 and recheck you will be able to see our hostapp is able to call to remote1.

You can find the configuration file inside

https://github.com/shdhumale/mfe-poc/tree/main/dynamic-federation-files/hostapp