Dynamically updating micro frontends in module federation in production

[syedhannan]

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?

[zhoushaw]

I want to know why do you want to reload the resource, because not reloading the resource defaults to using the cache which is a dynamic module

[syedhannan]

Consider a scenario where a user is interacting with 'app-1' while 'app-2' undergoes an update, resulting in a new Docker image build. In such a situation, when the user switches to 'app-2', they continue to receive the cached version instead of the updated application from the container.
The user only obtains the updated version upon refreshing the window which I wanna avoid and implement such a thing that whenever any route is opened it has to fetch the remoteEntry.js file and all other related files of app-2 once again.

[ScriptedAlchemy]

Persist the chunks on a CDN so older versions of the app exist. The issue is deployment skewing. It happens to any app that uses dynamic imports. You can also use our runtime plugin API and reload the page when something either 404s or use custom logic to determine if an update exists.