Angular,Webpack5模块联合:您提供了一个无效的对象,其中需要一个流
我目前正在开发一个关于微前端架构的项目,使用Webpack5模块联盟和Angular。我正在处理一个有点像anondin的问题。事实上,我所有的微前端(远程)都可以单独完美地工作,但是当它们集成到shell(主机)中时。我出现了一个错误,显示了应用程序上的一些错误Angular,Webpack5模块联合:您提供了一个无效的对象,其中需要一个流,angular,rxjs,webpack-5,webpack-module-federation,Angular,Rxjs,Webpack 5,Webpack Module Federation,我目前正在开发一个关于微前端架构的项目,使用Webpack5模块联盟和Angular。我正在处理一个有点像anondin的问题。事实上,我所有的微前端(远程)都可以单独完美地工作,但是当它们集成到shell(主机)中时。我出现了一个错误,显示了应用程序上的一些错误 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise
ERROR TypeError: You provided an invalid object where a stream was expected.
You can provide an Observable, Promise, Array, or Iterable.
这个误差来自于角核,尤其是当有一个集成的角材料组件时
这个问题最疯狂的地方是,当我激活chrome扩展“Redux开发工具”时,它就不存在了。
你有什么想法吗
共享库可能有问题,但我不知道在哪里
我的主机和远程设备的各种配置
外壳:
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 },
}
}),