Angular，Webpack5 模块联合：您提供了一个无效的对象，其中需要流答案

【问题标题】：Angular, Webpack5 Module Federation : You provided an invalid object where a stream was expectedAngular，Webpack5 模块联合：您提供了一个无效的对象，其中需要流
【发布时间】：2021-07-05 03:40:17
【问题描述】：

我目前正在使用 Webpack5 Module Federation 和 Angular 开发一个尊重微前端架构的项目。我正在处理一个有点 anondin 问题。事实上，我所有的微前端（远程）都可以完美地单独工作，但是在将它们集成到外壳（主机）中时。我出现了一个错误，并显示了应用程序上的一些错误。

ERROR TypeError: You provided an invalid object where a stream was expected.  
You can provide an Observable, Promise, Array, or Iterable.

这个错误来自 Angular Core，尤其是当有一个集成的 Angular Material 组件时。

这个问题最疯狂的是，当我激活 chrome 扩展“Redux Dev Tools”时，它不再存在。你有什么想法吗？

共享库可能有问题，但不知道在哪里？

我的主机和遥控器的各种配置。

壳牌：

new ModuleFederationPlugin({
      remotes: {
          // all remotes that will be used in the shell
          'designer': "designer@http://localhost:4201/remoteEntry.js",
          'library':"library@http://localhost:4202/remoteEntry.js"
        },
      shared:  {
        // all libraries that will be shared with microfrontends
        "@angular/core": { singleton: true, strictVersion: false },
        "@angular/common": { singleton: true, strictVersion: false },
        "@angular/router": { singleton: true, strictVersion: false },
        "@angular/forms":{ singleton: true, strictVersion: false },
        "@angular/cdk":{ singleton: true, strictVersion: false },
        "@angular/material":{ singleton: true, strictVersion: false },
        //"@ngx-translate/core":{ singleton: true, strictVersion: false },
        "@bl/auth-token": { singleton: true, strictVersion: false },
        //"@bl/elements": { singleton: true, strictVersion: false },
        "@bl/theme": { singleton: true, strictVersion: false },
        "@bl/shared": { singleton: true, strictVersion: false },
        "@bl/bl-app-layout": { singleton: true, strictVersion: false },
      }
  })

远程 1：

new ModuleFederationPlugin({
          
      // For remotes (please adjust)
      name: "library",
      filename: "remoteEntry.js",
      exposes: {
        './web-components': './src/bootstrap.ts',
      },        

      shared:  {
        "@angular/core": { singleton: true, strictVersion: false },
        "@angular/common": { singleton: true, strictVersion: false },
        "@angular/router": { singleton: true, strictVersion: false },
        "@angular/forms":{ singleton: true, strictVersion: false },
        "@angular/cdk":{ singleton: true, strictVersion: false },
        "@angular/material":{ singleton: true, strictVersion: false },
        //"@ngx-translate/core":{ singleton: true, strictVersion: false },
        "@bl/auth-token": { singleton: true, strictVersion: false },
        //"@bl/elements": { singleton: true, strictVersion: false },
        "@bl/theme": { singleton: true, strictVersion: false },
        "@bl/shared": { singleton: true, strictVersion: false },
        "@bl/bl-app-layout": { singleton: true, strictVersion: false },
      }
    }),

远程 2：

new ModuleFederationPlugin({
          
      // For remotes (please adjust)
      name: "designer",
      filename: "remoteEntry.js",
      exposes: {
        './web-components': './src/bootstrap.ts',
      },        

      shared:  {
        "@angular/core": { singleton: true, strictVersion: false },
        "@angular/common": { singleton: true, strictVersion: false },
        "@angular/router": { singleton: true, strictVersion: false },
        "@angular/forms":{ singleton: true, strictVersion: false },
        "@angular/cdk":{ singleton: true, strictVersion: false },
        "@angular/material":{ singleton: true, strictVersion: false },
        //"@ngx-translate/core":{ singleton: true, strictVersion: false },
        "@bl/auth-token": { singleton: true, strictVersion: false },
        //"@bl/elements": { singleton: true, strictVersion: false },
        "@bl/theme": { singleton: true, strictVersion: false },
        "@bl/shared": { singleton: true, strictVersion: false },
        "@bl/bl-app-layout": { singleton: true, strictVersion: false },
      }
    }),

【问题讨论】：

标签： angular rxjs webpack-5 webpack-module-federation

【解决方案1】：

我刚刚遇到了和你一样的问题。对我来说，将 rxjs 和 rxjs/operators 添加到 ModuleFederationPlugin 中的共享库解决了这个问题。我为 shell 和远程应用程序添加了以下库：

'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs/operators': { singleton: true, strictVersion: true, requiredVersion: '~6.6.0' }

需要显式共享 rxjs/operators 并给出一个固定的版本号以在示例中使用。

【讨论】：