How to update remote module without refreshing the window in Angular module federation

Question

I am trying to implement dynamic module federation where I have a host application and few remote applications. for example After running all the application including host app and later when I stopped one of the remote application and when I redirect to that application Its showing previous loaded module . I need to update the module dynamically without refreshing the page.

import { loadRemoteModule } from '@angular-architects/module-federation';
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const APP_ROUTES: Routes = [
  {
    path: '',
    // component: HomeComponent,
    pathMatch: 'full',
    redirectTo: 'cli-commands',
  },

  {
    path: 'log-collection',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'log-collection',
        exposedModule: './Module',
      })
        .then((m) => m.LogCollectionModule)
        .catch((err) => {
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
  },
 
  {
    path: 'encrypt',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'encrypt',
        exposedModule: './Module',
      })
        .then((m) => m.EncryptModule)
        .catch((err) => {
          console.log(err);
          
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
  },
  
  {
    path: 'audit-trail',
    loadChildren: () =>
      loadRemoteModule({
        type: 'manifest',
        remoteName: 'audit-trail',
        exposedModule: './Module',
      })
        .then((m) => m.AuditTrailModule)
        .catch((err) => {
          return import('./not-found/not-found.module').then((m) => m.NotFoundModule);
        }),
    data: { remoteEntry: 'http://localhost:4207/remoteEntry.js' }
  },
  {
    path: 'not-found',
    component: NotFoundComponent,
  },
  {
    path: '**',
    component: NotFoundComponent,
  },
];

This is my app.routes.ts file a d below is my webpack.config.ts of my host app

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const { MFLiveReloadPlugin } = require("@module-federation/fmr");

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "../../tsconfig.json"), [
  /* mapped paths to share */
 
]);
console.log(path.resolve(__dirname, '..'));
module.exports = {
  output: {
    uniqueName: "shell-rcm",
    publicPath: 'auto',
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false,
  },
  devServer: {
    liveReload: true,
    watchFiles: [path.resolve(__dirname, '..', 'src/app')], // make sure that hits your host app folder
  },
  plugins: [
    new MFLiveReloadPlugin({
      port: 4200, // the port your app runs on
      container: "shell-rcm", // the name of your app, must be unique
      standalone: false, // false uses chrome extention
    }),
    new ModuleFederationPlugin({
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
        "@angular/material": { singleton: true, strictVersion: true },
        "ngx-toastr": { singleton: true, strictVersion: true },
        // "keycloak-angular": { singleton: true, strictVersion: true, eager: true },

        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
};