Angular, Webpack5 Module Federation : You provided an invalid object where a stream was expected

Question

I am currently developing a project respecting a microfrontend architecture using Webpack5 Module Federation and Angular. I am dealing with a somewhat anondin problem. Indeed, all my microfrontends (remote) work perfectly alone but when integrating them into the shell (host). I have an error that appears and shows some bugs on the application.

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

This error comes from Angular Core and especially when there is an integrated Angular Material component.

The craziest thing about this problem is that it’s no longer there when I activate the chrome extension "Redux Dev Tools". Do you have any ideas ?

There’s probably a problem with sharing libraries, but I don’t know where?

My various configs of the host and remotes.

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

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

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

user_16545831 · Answer

I just ran into the same problem as you. For me adding rxjs and rxjs/operators to the shared libraries in the ModuleFederationPlugin fixed the problem. I added the following libraries for both the shell and remote applications:

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

It is necessary to explicitly share rxjs/operators and also give a fixed version number to use as in the example.

Angular, Webpack5 Module Federation : You provided an invalid object where a stream was expected

1 Answers