Angular、Nx Workspace、Webpack 5 Module Federation：您提供了一个无效的对象

Posted 2023-02-16

【中文标题】Angular、Nx Workspace、Webpack 5 Module Federation：您提供了一个无效的对象

【英文标题】：Angular, Nx Workspace, Webpack 5 Module Federation: You provided an invalid object where a stream was expected

【发布时间】：2021-10-04 23:26:22

【问题描述】：

我目前正在开发一个使用 Webpack 5 的 Module Federation 的项目。该项目包含 Angular 12 应用程序：一个应用程序是外壳，另一个是应加载到外壳中的远程应用程序。两个应用程序都运行良好，但在将远程导入 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 接口的请求。似乎在执行请求并返回 observables 时发生错误。我的猜测是我的依赖项导致了问题。这些是我当前安装的依赖项：

    "@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 和远程应用程序通过 Module Federation 共享以下库：

    '@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));

【问题讨论】：

导致错误的实际代码在哪里？

你能发布更多的堆栈跟踪吗？

感谢您的 cmets，我刚刚添加了完整的堆栈跟踪和函数调用

【参考方案1】：

我自己发现了问题。似乎由于模块联合的使用，类型 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 模块。