Angular、Nx Workspace、Webpack 5 模块联合：您在需要流的地方提供了一个无效对象
Angular, Nx Workspace, Webpack 5 Module Federation: You provided an invalid object where a stream was expected
我目前正在从事一个使用 Webpack 5 的 Module Federation 的项目。该项目包含 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, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/material': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/forms': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@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, 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)
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, strictVersion: true, requiredVersion: 'auto' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/material': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/forms': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs/operators': { singleton: true, strictVersion: true, requiredVersion: '~6.6.0' },
'@libs/storage-client': { singleton: true },
...sharedMappings.getDescriptors()
}
我还能够删除共享库的固定版本号。只有 rxjs/operators 需要它，因为它不是额外的 npm 模块。
我目前正在从事一个使用 Webpack 5 的 Module Federation 的项目。该项目包含 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, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/material': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@angular/forms': { singleton: true, strictVersion: true, requiredVersion: '12.1.3' },
'@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, 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)
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, strictVersion: true, requiredVersion: 'auto' },
'@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/common/http': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/material': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'@angular/forms': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
'rxjs/operators': { singleton: true, strictVersion: true, requiredVersion: '~6.6.0' },
'@libs/storage-client': { singleton: true },
...sharedMappings.getDescriptors()
}
我还能够删除共享库的固定版本号。只有 rxjs/operators 需要它，因为它不是额外的 npm 模块。