Angular，Webpack5 模塊聯合：您提供了無效的 object，其中預期為 stream

Question

我目前正在使用 Webpack5 Module Federation 和 Angular 開發一個尊重微前端架構的項目。 我正在處理一個有點 anondin 問題。 事實上，我所有的微前端（遠程）都可以完美地單獨工作，但是將它們集成到 shell（主機）時。 我出現了一個錯誤，並顯示了應用程序上的一些錯誤。

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

此錯誤來自 Angular 內核，尤其是在集成 Angular 材料組件時。

關於這個問題最瘋狂的是，當我激活 chrome 擴展“Redux Dev Tools”時它不再存在。 你有什么想法？

共享庫可能有問題，但我不知道在哪里？

我的主機和遙控器的各種配置。

Shell：

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

Answer 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 並提供一個固定的版本號以在示例中使用。