Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to fetch latest UI changes if the container is updated without refreshing the browser

I have a micro frontend application in Angular which I have built using module federation. It runs in production with Docker containers.

My question is if the user browses some micro frontend app and meanwhile the container for the particular app gets changed then how can I update to the latest UI change without the user having to refresh the webpage.

My current implementation is such that only on the page refresh I am able to fetch the latest change.

I am unable to fetch the latest changes by going to the particular mfe route since it is a lazily loaded component therefore Angular serves it from the cache for the second time.

Is there a way to call this route shared below everytime a user visits rather than fetching it from the cache when the user visits it the second time.

{
    path: 'app-1',
    title: 'First App',
    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
          );
        }),
  },

Alternatively, what approach should I take to notify the user regarding the change in the container so that they can manually refresh the page to get the latest changes?

Tags:

2

Answers


  1. 0

    You could create a JSON with the version of the app and use a Guard to fetch this JSON and compare the version with the last version of your app (You can store this data in environment). If the version is different you can trigger a refresh into the client browser to get the last version.

    Login or Signup to reply.
  2. 0

    To auto-fetch latest UI changes without a browser refresh, consider using WebSocket or Server-Sent Events (SSE) to listen for updates in your micro frontend architecture. When an update is detected, you can programmatically trigger Angular’s router to reload the route, or use dynamic import expressions for your module federation setup to re-import the updated module. This avoids relying on cache, ensuring users always see the latest. Configuring your Angular service to bypass cache when loading new versions of modules will also be necessary. Remember, implementation will vary based on your specific setup.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search