Angular 模块与 Web 组件的联合：如何共享 Ngrx 存储？

Question

几个月前，我开始了一个使用带有 Web 组件的模块联合的大项目，如 https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation 中所述-好-坏-丑/
shell 必须激活在不同角度版本中开发的不同远程模块，因此该技术被证明是使每个团队在不受任何干扰的情况下工作的绝佳解决方案。 现在我想引入 Ngrx 在 shell 和远程模块之间共享存储和状态，但我无法让它工作。我尝试共享@ngrx/store，但在远程模块中出现注入错误。

让它工作的唯一方法是在窗口对象中设置对 shell 创建的存储的引用：

    (window as any)['_MY_GLOBL_STORE'] = this.store;

并由供应工厂在远程引用它：

    providers: [
      {
        provide: Store<AppState>, useFactory: () => {
          return (window as any)['_MY_GLOBL_STORE'];
        }
      }
    ]

它似乎有效，但我不知道这是否是一个好的解决方案，以及是否可能有一些缺点/陷阱。 您认为在窗口对象中共享角度对象正确且稳定吗？有什么建议或想法来解决 MFE 和 Web 组件的注入错误吗？ 谢谢

Answer 1

我不能解决您的问题，但请尝试一下 https://github.com/angular-architects/module-federation-plugin/issues/11