Angular,Webpack5 模块联合:您提供了一个无效的对象,其中需要流
Posted
技术标签:
【中文标题】Angular,Webpack5 模块联合:您提供了一个无效的对象,其中需要流【英文标题】:Angular, Webpack5 Module Federation : You provided an invalid object where a stream was expected 【发布时间】: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 ,
),
【问题讨论】:
【参考方案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 并给出一个固定的版本号以在示例中使用。
【讨论】:
以上是关于Angular,Webpack5 模块联合:您提供了一个无效的对象,其中需要流的主要内容,如果未能解决你的问题,请参考以下文章
Angular、Nx Workspace、Webpack 5 Module Federation:您提供了一个无效的对象