基于Web Components的Angular模块联邦：如何共享Ngrx Store？

一、通过window挂载共享Store的弊端 #

你当前用window挂载Store的方式虽然能临时解决问题，但存在不少隐患：

• 全局变量污染：自定义的全局变量可能和第三方库、其他团队的代码冲突，大型项目中风险极高
• 类型安全缺失：用(window as any)跳过TypeScript类型检查，后期修改或维护时容易出现类型不匹配的运行时错误
• 生命周期风险：如果远程模块加载速度快于壳应用的Store初始化，会拿到undefined，直接导致注入失败
• 调试与追踪困难：全局变量的修改没有明确的调用链路，排查状态异常问题时会非常麻烦

二、更稳定的解决方案 #

针对模块联邦+Web Components的多Angular版本微前端场景，推荐以下几种方案：

1. 模块联邦共享@ngrx/store核心依赖 #

利用模块联邦的shared配置，将@ngrx/store及其相关依赖（如@ngrx/effects）设置为单例共享，确保全局只有一个Store实例。

• 壳应用的webpack配置示例：

  shared: {
    '@ngrx/store': { singleton: true, strictVersion: true, requiredVersion: '^15.0.0' },
    '@ngrx/effects': { singleton: true, strictVersion: true, requiredVersion: '^15.0.0' }
  }
  

• 远程模块同步配置相同的共享依赖，Angular的DI系统会自动识别全局的Store实例，无需手动挂载window。注意要保证各模块使用的@ngrx版本与壳应用的共享版本兼容，避免版本冲突。

2. 通过Web Components自定义事件传递Store #

借助Web Components的事件机制，在壳应用初始化Store后主动传递给远程模块：

• 壳应用代码：

  // 初始化Store后派发事件
  const storeEvent = new CustomEvent('shared-store-ready', {
    detail: this.store,
    bubbles: true,
    composed: true // 允许事件穿透Shadow DOM
  });
  document.dispatchEvent(storeEvent);
  

• 远程模块的Web Component代码：

  connectedCallback() {
    document.addEventListener('shared-store-ready', (e: CustomEvent) => {
      const sharedStore = e.detail;
      // 将Store注入到远程模块的DI系统
      const injector = Injector.create({
        providers: [{ provide: Store, useValue: sharedStore }],
        parent: this.injector
      });
      // 后续组件可通过该injector获取Store
    }, { once: true });
  }
  

这种方式避免了全局污染，同时能保证Store初始化完成后再传递给远程模块。

3. 模块联邦导出共享Store实例 #

通过模块联邦的exposes配置，在壳应用中导出Store实例，远程模块直接导入并注册为提供者：

• 壳应用创建共享Store导出文件：

  // src/app/shared-store.ts
  import { Store } from '@ngrx/store';
  import { AppState } from './app.state';
  
  export let sharedStore: Store<AppState>;
  
  export const setSharedStore = (store: Store<AppState>) => {
    sharedStore = store;
  };
  

• 壳应用初始化Store后调用setSharedStore赋值
• 壳应用webpack配置添加暴露：

  exposes: {
    './shared-store': './src/app/shared-store.ts'
  }
  

• 远程模块导入并注册提供者：

  import { sharedStore } from 'shell-app/shared-store';
  
  @NgModule({
    providers: [{ provide: Store, useValue: sharedStore }]
  })
  export class RemoteFeatureModule {}
  

这种方式符合模块联邦的设计理念，类型安全且易于维护。

总结 #

window挂载的方式仅适合临时验证，长期项目中强烈推荐使用上述基于模块联邦共享依赖或事件传递的方案，更契合Angular和微前端的设计规范，稳定性与可维护性更高。

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