堆棧內存溢出
  簡體   English   中英

Angular、Nx 工作區、Webpack 5 模塊聯合：您提供了一個預期流的無效對象

[英]Angular, Nx Workspace, Webpack 5 Module Federation: You provided an invalid object where a stream was expected

 原文  2021-07-29 09:42:54  6   1    angular/ rxjs/ webpack-5/ micro-frontend/ webpack-module-federation

問題描述

我目前正在開發一個使用 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, 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

訂閱由方法返回的 observable 時發生錯誤：

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));
}

1 個解決方案

解決方案1
 0  2021-07-29 12:14:17

我只是自己發現了問題。 好像是因為使用了 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 模塊。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Angular，Webpack5 模塊聯合：您提供了無效的 object，其中預期為 stream Angular：您在需要流的地方提供了一個無效的對象。 你可以提供一個 Observable、Promise、Array 或 Iterable Angular 8: ERROR 錯誤: Uncaught (in promise): TypeError: You provided an invalid object where a stream is expected Angular，您提供了一個無效的對象，其中只在 --aot build 中需要流 Angular 11 錯誤：您提供了無效的 object，而應為 stream。 您可以提供一個 Observable、Promise、Array 或 Iterable Angular 您在預期 stream 的地方提供了“未定義” 類型錯誤：您提供了一個預期流的無效對象。 你可以提供一個 Observable、Promise、Array 或 Iterable xplat您提供了一個無效的對象，該對象應在其中流。 您可以提供一個Observable，Promise，Array或Iterable 單元測試 - 獲取 TypeError：您提供了一個預期流的無效對象 Angular 4 - Http請求錯誤：您在預期的流中提供了“undefined”
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM