容器更新后，如何无需刷新浏览器获取Angular微前端最新UI？

一、实现路由访问时强制重新加载远程模块 #

要解决懒加载模块缓存问题，可通过以下两种方式强制每次路由访问时重新拉取最新模块：

1. 手动清除Module Federation缓存 #

Module Federation默认会在全局对象中缓存已加载的远程模块，可在路由加载前删除对应缓存条目，迫使loadRemoteModule重新请求最新资源：

{
    path: 'app-1',
    title: 'First App',
    canActivate: [AuthGuard],
    loadChildren: () => {
        // 清除远程引用缓存
        const remoteRefKey = `webpack/container/reference/app-1`;
        if (window[remoteRefKey]) {
            delete window[remoteRefKey];
        }
        // 清除已加载的模块缓存
        const moduleCacheKey = `webpack/container/remote/app-1/./Module`;
        if (window.__webpack_modules__?.[moduleCacheKey]) {
            delete window.__webpack_modules__[moduleCacheKey];
        }

        return 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
            );
        });
    },
},

注意：该方案会增加网络请求开销，适合对实时性要求极高的场景。

2. 构建时添加文件哈希，利用浏览器缓存机制 #

通过Angular构建配置生成带哈希的文件名，确保容器更新后资源URL变化，浏览器自动加载新资源：

• 在angular.json的build配置中开启全量哈希：

  "projects": {
    "app-1": {
      "architect": {
        "build": {
          "options": {
            "outputHashing": "all",
            // 其他配置...
          }
        }
      }
    }
  }
  

• 部署时同步更新Module Federation的manifest文件，确保其中的模块路径指向带新哈希的资源文件。这种方式无需修改代码，依赖浏览器的缓存策略自动生效。

二、通知用户手动刷新页面 #

若不想强制重新加载影响性能，可通过版本检测机制提示用户主动刷新：

1. 实现远程版本检测 #

在每个微前端中暴露版本获取模块，主应用定期对比版本差异：

• 微前端app-1中暴露版本模块：

  // app-1/src/app/version.ts
  export const getVersion = () => {
      // 可使用Git commit hash、构建时间戳或版本号，构建时自动注入
      return 'v1.2.3';
  };
  

• 在app-1的Module Federation配置中暴露该模块：

  // app-1/webpack.config.js
  module.exports = {
      plugins: [
          new ModuleFederationPlugin({
              name: 'app-1',
              filename: 'remoteEntry.js',
              exposes: {
                  './Module': './src/app/app.module.ts',
                  './Version': './src/app/version.ts' // 新增暴露
              },
              // 其他配置...
          })
      ]
  };
  

• 主应用中添加版本检测服务：

  @Injectable({ providedIn: 'root' })
  export class VersionCheckService {
      private cachedVersions = new Map<string, string>();
  
      async checkForUpdates(remoteName: string): Promise<boolean> {
          try {
              const versionModule = await loadRemoteModule({
                  type: 'manifest',
                  remoteName: remoteName,
                  exposedModule: './Version',
              });
              const currentVersion = versionModule.getVersion();
              const cachedVersion = this.cachedVersions.get(remoteName);
  
              if (!cachedVersion) {
                  this.cachedVersions.set(remoteName, currentVersion);
                  return false;
              }
  
              if (currentVersion !== cachedVersion) {
                  this.cachedVersions.set(remoteName, currentVersion);
                  return true;
              }
              return false;
          } catch (err) {
              console.error(`版本检测失败: ${remoteName}`, err);
              return false;
          }
      }
  }
  

2. 触发更新提示 #

在主应用的路由守卫或全局组件中检测版本变化，显示刷新提示：

• 在路由守卫中检测：

  @Injectable()
  export class VersionCheckGuard implements CanActivate {
      constructor(private versionCheckService: VersionCheckService, private snackBar: MatSnackBar) {}
  
      async canActivate(): Promise<boolean> {
          const hasUpdate = await this.versionCheckService.checkForUpdates('app-1');
          if (hasUpdate) {
              this.snackBar.open('应用已更新，请刷新页面获取最新内容', '刷新', {
                  duration: 0,
                  horizontalPosition: 'center',
                  verticalPosition: 'top',
              }).onAction().subscribe(() => {
                  window.location.reload();
              });
          }
          return true;
      }
  }
  

• 路由配置中添加守卫：

  {
      path: 'app-1',
      title: 'First App',
      canActivate: [AuthGuard, VersionCheckGuard], // 新增版本检测守卫
      loadChildren: () => /* ...原有加载逻辑... */
  },
  

3. 基于Docker镜像元数据的检测方案 #

部署时将Docker镜像标签或构建信息写入微前端的静态文件（如assets/version.json），主应用定时请求该文件对比版本：

• 生成version.json（可在Docker构建阶段自动生成）：

  {
      "imageTag": "app-1:v1.2.3",
      "buildTime": "2024-05-20T14:30:00Z"
  }
  

• 主应用定时请求该文件，对比本地缓存的版本信息，不一致则触发提示。

内容的提问来源于stack exchange，提问作者Syed Abdul Hannan