Angular微前端场景下MFE远程应用嵌入应用壳后DOM未更新问题

根因 #

这是Angular微前端架构下典型的Zone.js上下文冲突问题。远程应用独立运行时使用自身Zone实例监听异步事件、自动触发变更检测；嵌入宿主应用后，两套Zone实例冲突，导致远程应用内部的交互事件无法被自身Zone捕获，无法触发自动变更检测，只有宿主应用的交互事件触发全局Zone检测时，才会批量更新积压的DOM变更。

解决方案 #

方案1：配置Module Federation共享Zone.js依赖（推荐） #

在宿主应用和远程应用的module-federation.config.js配置文件中，将zone.js设为全局单例共享，确保整个微前端场景下只有一个Zone实例运行：

shared: share({
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  // 新增以下配置
  'zone.js': { singleton: true, strictVersion: true, requiredVersion: 'auto' }
})

修改配置后重启项目即可生效。

方案2：手动绑定远程应用的NgZone上下文 #

如果方案1存在版本兼容问题，可以在远程应用的入口启动逻辑中手动绑定NgZone上下文：

// 远程应用的src/bootstrap.ts文件
import { NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(moduleRef => {
    const ngZone = moduleRef.injector.get(NgZone);
    // 把远程应用的事件回调统一放到当前Zone上下文中执行
    (window as any).runRemoteAppCallback = (callback: () => void) => ngZone.run(callback);
  })
  .catch(err => console.error(err));

方案3：手动触发变更检测（兜底方案） #

如果前两种方案都无法落地，可以在远程应用的所有交互回调末尾手动触发变更检测：

// 远程应用的数据表组件示例
import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-data-grid',
  templateUrl: './data-grid.component.html'
})
export class DataGridComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  // 过滤器展开/收起回调
  toggleFilter() {
    this.filterExpanded = !this.filterExpanded;
    // 手动触发当前组件的变更检测
    this.cdr.detectChanges();
  }

  // 表格排序、分页、筛选的回调同理，末尾添加上面一行代码即可
}

内容的提问来源于stack exchange，提问作者Fusion Moose