如何解决Angular、Nx 工作区、Webpack 5 模块联合：您提供了一个预期流的无效对象
我目前正在开发一个使用 Webpack 5 的模块联合的项目。该项目包含 Angular 12 应用程序：一个应用程序是 shell，另一个是应该加载到 shell 中的远程应用程序。这两个应用程序自己都运行得很好，但是在将远程导入 shell 应用程序时出现以下错误：
core.js:6479 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable,Promise,Array,or Iterable.
at subscribeto (subscribeto.js:27)
at innerSubscribe (innerSubscribe.js:71)
at MergeMapSubscriber._innerSub (mergeMap.js:57)
at MergeMapSubscriber._tryNext (mergeMap.js:51)
at MergeMapSubscriber._next (mergeMap.js:34)
at MergeMapSubscriber.next (Subscriber.js:49)
at Observable._subscribe (subscribetoArray.js:3)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at MergeMapOperator.call (mergeMap.js:19)
远程应用程序开始向 REST 和 GraphQL 接口发出请求。似乎在执行请求并返回可观察对象时发生错误。我的猜测是我的依赖项导致了问题。这些是我目前安装的依赖项：
{
"@angular-architects/module-federation": "^12.4.0","@angular/animations": "^12.0.0","@angular/cdk": "^12.1.3","@angular/common": "^12.0.0","@angular/compiler": "^12.0.0","@angular/core": "^12.0.0","@angular/forms": "^12.0.0","@angular/material": "^12.1.3","@angular/platform-browser": "^12.0.0","@angular/platform-browser-dynamic": "^12.0.0","@angular/router": "^12.0.0","@apollo/client": "^3.3.21","@ngx-translate/core": "^13.0.0","@ngx-translate/http-loader": "^6.0.0","@nrwl/angular": "^12.5.8","ag-grid-community": "^25.3.0","apollo-angular": "^2.6.0","bootstrap": "^5.0.2","flag-icon-css": "^3.5.0","graphql": "^15.5.1","graphql-tag": "^2.12.5","ngx-toastr": "^14.0.0","rxjs": "~6.6.0","tslib": "^2.0.0","zone.js": "~0.11.4"
}
我也尝试调整 Webpack 配置，但这些更改没有帮助。 shell 和远程应用程序通过模块联合共享以下库：
{
'@angular/cdk': { singleton: true,strictVersion: true,requiredVersion: '12.1.3' },'@angular/core': { singleton: true,'@angular/common': { singleton: true,'@angular/common/http': { singleton: true,'@angular/router': { singleton: true,'@angular/material': { singleton: true,'@angular/forms': { singleton: true,'@libs/storage-client': { singleton: true },...sharedMappings.getDescriptors()
}
完整的堆栈跟踪如下所示：
core.js:6479 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable,or Iterable.
at subscribeto (subscribeto.js:27)
at innerSubscribe (innerSubscribe.js:71)
at MergeMapSubscriber._innerSub (mergeMap.js:57)
at MergeMapSubscriber._tryNext (mergeMap.js:51)
at MergeMapSubscriber._next (mergeMap.js:34)
at MergeMapSubscriber.next (Subscriber.js:49)
at Observable._subscribe (subscribetoArray.js:3)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at MergeMapOperator.call (mergeMap.js:19)
defaultErrorLogger @ core.js:6479
handleError @ core.js:6527
next @ core.js:29316
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25968
(anonymous) @ core.js:28731
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.js:28604
onHandleError @ core.js:28731
handleError @ zone.js:376
runTask @ zone.js:181
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args.<computed> @ zone.js:2541
setTimeout (async)
scheduleTask @ zone.js:2543
scheduleTask @ zone.js:393
onScheduleTask @ zone.js:283
scheduleTask @ zone.js:386
scheduleTask @ zone.js:221
scheduleMacroTask @ zone.js:244
scheduleMacroTaskWithCurrentZone @ zone.js:679
(anonymous) @ zone.js:2585
proto.<computed> @ zone.js:975
hostReportError @ hostReportError.js:2
error @ Subscriber.js:156
_error @ Subscriber.js:75
error @ Subscriber.js:55
notifyError @ innerSubscribe.js:45
_error @ innerSubscribe.js:13
error @ Subscriber.js:55
notifyError @ innerSubscribe.js:45
_error @ innerSubscribe.js:13
error @ Subscriber.js:55
innerSubscribe @ innerSubscribe.js:74
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribetoArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
innerSubscribe @ innerSubscribe.js:67
call @ takeuntil.js:11
subscribe @ Observable.js:23
_resetoptions @ select.js:748
(anonymous) @ select.js:421
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
_next @ Subscriber.js:72
next @ Subscriber.js:49
notifyNext @ mergeMap.js:70
_next @ innerSubscribe.js:10
next @ Subscriber.js:49
(anonymous) @ subscribetoArray.js:3
innerSubscribe @ innerSubscribe.js:71
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribetoArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ takeuntil.js:14
subscribe @ Observable.js:23
ngAfterContentinit @ select.js:420
callHook @ core.js:2526
callHooks @ core.js:2495
executeInitAndCheckHooks @ core.js:2446
refreshView @ core.js:9505
refreshEmbeddedViews @ core.js:10589
refreshView @ core.js:9488
refreshComponent @ core.js:10635
refreshChildComponents @ core.js:9261
refreshView @ core.js:9514
refreshEmbeddedViews @ core.js:10589
refreshView @ core.js:9488
refreshComponent @ core.js:10635
refreshChildComponents @ core.js:9261
refreshView @ core.js:9514
renderComponentOrTemplate @ core.js:9578
tickRootContext @ core.js:10809
detectChangesInRootView @ core.js:10834
detectChanges @ core.js:22887
tick @ core.js:29711
(anonymous) @ core.js:29571
invoke @ zone.js:372
onInvoke @ core.js:28705
invoke @ zone.js:371
run @ zone.js:134
run @ core.js:28559
next @ core.js:29570
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25968
checkStable @ core.js:28627
onLeave @ core.js:28755
onInvokeTask @ core.js:28699
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1600
globalZoneAwareCallback @ zone.js:1626
this.getAllSeries().subscribe(allSeries => {
// This is where the error occurs
}
public getAllSeries(): Observable<Filter[]> {
const requestParameters: RequestParameters = {
url: `${this.storageBaseUrl}/filters?type=series`,headers: {
Authorization: this.authorizationToken
},responseType: "json"
};
return this.requestService.getRequest<Filter[]>(requestParameters);
}
public getRequest<T>(request: RequestParameters,withAuth: boolean = true): Observable<T> {
return this.http
.get<T>(request.url,{
headers: request.headers,responseType: request.responseType === "arraybuffer" || request.responseType === "blob"
? (request.responseType as "json")
: "json"
})
.pipe(take(1));
}
解决方法
我自己才发现问题。好像是因为使用了 Module Federation ，所以在微前端无法引用 Observable 类型。我不得不将 rxjs 和 rxjs/operators 添加到 Webpack 配置文件中的共享库中。 shell 和远程应用程序现在共享这些库：
{
'@angular/cdk': { singleton: true,strictVersion: true,requiredVersion: 'auto' },'@angular/core': { singleton: true,'@angular/common': { singleton: true,'@angular/common/http': { singleton: true,'@angular/router': { singleton: true,'@angular/material': { singleton: true,'@angular/forms': { singleton: true,'rxjs': { singleton: true,'rxjs/operators': { singleton: true,requiredVersion: '~6.6.0' },'@libs/storage-client': { singleton: true },...sharedMappings.getDescriptors()
}
我还能够删除共享库的固定版本号。只有 rxjs/operators 需要它，因为它不是额外的 npm 模块。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。