I've encountered a scenario that I believe many of you might have faced as well in production environment. Let me provide some context:

In my Angular application, I'm utilizing Module Federation to create micro frontends. Each micro frontend is hosted in its own container. Now, whenever I update one of these MFEs and replace the existing container, I notice that the changes only reflect when I refresh the web page. Otherwise, the UI shown retains the previous version of the MFE which was cached.

Here's a snippet of the code I'm using to call the routes:

{  path: 'app-1',  title: 'App 1',  canActivate: [AuthGuard],  loadChildren: () =>    loadRemoteModule({      type: 'manifest',      remoteName: 'app-1',      exposedModule: './Module',    })      .then((m) => m.AppModule)      .catch((err) => {        return import('./page-not-found/page-not-found.module').then(          (m) => m.PageNotFoundModule        );      }),}

Now, my query pertains to modifying this function or finding an alternative approach so that whenever this route is called, it fetches the latest version of the code from the URL of the MFE (http://localhost:4201/remoteEntry.js) and subsequently loads the latest UI without necessitating a page refresh. Currently the js files of the MFE are loaded only during the first time visit to the respective route (as seen in the Network tab in console) and subsequent visits to the same route do not fetch any new files.

I would greatly appreciate any insights, suggestions, or solutions you might have regarding this matter. Has anyone encountered a similar challenge, and if so, how did you address it?