mergeMap Error in other browsers but Chrome

[galanar]

Bug Report

Current Behavior
I upgraded an existing Angular 5 project to Angular 6 and changed everything to pipe()-operations.
The code (snippet) below has been reworked from (Before) to (After).
In Chrome, everything is working fine but in any other browser it is not working.
See the Firefox console output in the "Additional context" section.

Reproduction

• REPL or Repo link:
  no source available

(Before)

    this.lprGreylistService.getLprGreylist()
      .mergeMap((lprGreylist: LprGreylistItem[]) =>
        Observable.forkJoin(lprGreylist.map((entry: LprGreylistItem) => {
      return this.lprGreylistReasonService.getLprGreylistReasonEntry(entry.greylistReason)
        .map((Reason: LprGreylistReason) => {
          entry.reasonDefaultText = Reason.defaultText;
          return entry;
        });
      })
    )).subscribe((lprGreylist => {
      this.lprGreylist = lprGreylist;
      this.dataSource = new MatTableDataSource<LprGreylistItem>(this.lprGreylist);
    }), (error => {
      // error handling
    }));

(After)

 this.lprGreylistService.getLprGreylist()
      .pipe(
            mergeMap((lprGreylist: LprGreylistItem[]) =>
              forkJoin(lprGreylist.map((entry: LprGreylistItem) => {
                  return this.lprGreylistReasonService.getLprGreylistReasonEntry(entry.greylistReason)
                    .pipe(
                      map((Reason: LprGreylistReason) => {
                        entry.reasonDefaultText = Reason.defaultText;
                        return entry;
                      })
                    );
                })
              )
            )
          )
      .subscribe((lprGreylist => {
        this.lprGreylist = lprGreylist;
        this.dataSource = new MatTableDataSource<LprGreylistItem>(this.lprGreylist);
      }), (error => {
        // error handling
      }));

(corresponding serviceMethods)

  getLprGreylist(): Observable<LprGreylistItem[]> {
    return this.httpClient.get<LprGreylistItem[]>(`${this.greyListUrl}`)
      .pipe(
        catchError((error: HttpErrorResponse) => observableThrowError(error))
      );
  }

  getLprGreylistReasonEntry(reasonId: number): Observable<LprGreylistReason> {
    return this.httpClient.get<LprGreylistReason>(`${this.greyListReasonUrl}/${reasonId}`)
      .pipe(
        catchError((error: HttpErrorResponse) => observableThrowError(error))
      );
  }

Expected behavior
Same behaviour in other browsers.

Environment

• Runtime: Chrome 67.0.3396.87, Firefox Quantum 60.0.2, Microsoft Edge 41.16299.492.0
• RxJS version: 6.2.1
• angular-cli version: 6.0.8

Possible Solution

Additional context/Screenshots

• Edge is not showing anything in the console

(Firefox Error)
TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
Stack trace:
subscribeTo@http://localhost:4200/vendor.js:162888:15
subscribeToResult@http://localhost:4200/vendor.js:163040:12
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype._innerSub@http://localhost:4200/vendor.js:157858:18
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype._tryNext@http://localhost:4200/vendor.js:157855:9
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype._next@http://localhost:4200/vendor.js:157838:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:152340:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:4200/vendor.js:152363:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:152340:13
./node_modules/rxjs/_esm5/internal/operators/map.js/MapSubscriber.prototype._next@http://localhost:4200/vendor.js:157589:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:152340:13
./node_modules/rxjs/_esm5/internal/operators/filter.js/FilterSubscriber.prototype._next@http://localhost:4200/vendor.js:157029:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:152340:13
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.js:157867:9
./node_modules/rxjs/_esm5/internal/InnerSubscriber.js/InnerSubscriber.prototype._next@http://localhost:4200/vendor.js:151567:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:152340:13
onLoad@http://localhost:4200/vendor.js:28984:21
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2737:17
onInvokeTask@http://localhost:4200/vendor.js:56783:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2736:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2504:28
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:2812:24
invokeTask@http://localhost:4200/polyfills.js:3856:9
globalZoneAwareCallback@http://localhost:4200/polyfills.js:3882:17

[kwonoj]

at a glance code seems correct, and error message is indicating some of input for mergemap is not an observable to subscribe into. If this is different between browsers, can you check if response is identical as well?

(Note: I haven't had today's coffee yet so may possible to miss something)

[galanar]

The input for mergeMap is:

(corresponding serviceMethods)

  getLprGreylist(): Observable<LprGreylistItem[]> {
    return this.httpClient.get<LprGreylistItem[]>(`${this.greyListUrl}`)
      .pipe(
        catchError((error: HttpErrorResponse) => observableThrowError(error))
      );
  }

  getLprGreylistReasonEntry(reasonId: number): Observable<LprGreylistReason> {
    return this.httpClient.get<LprGreylistReason>(`${this.greyListReasonUrl}/${reasonId}`)
      .pipe(
        catchError((error: HttpErrorResponse) => observableThrowError(error))
      );
  }

The error is only occuring after the update to Angular 6 and I only get it to work in Chrome (+Canary).
The (Before) code is what was used in Angular 5 and was working in nearly every browser.

As for the services, the only change that was made during the upgrade was wrapping the 'catchError' in the 'pipe'.

I will check if the initial response from the service is identical in different browsers and amend here.

[galanar]

As for pushing this further (is there more informatin needed?), I have checked and the response from the service is identical in the up-to-date browsers.
It's still not working correctly besides in Chrome.

[cartant]

@galanar It needs a minimal reproduction. If the problem cannot be reproduced, it is highly unlikely it can be fixed. And even less likely that some one else will investigate it.

[galanar]

@cartant I know that this has to be reproduced, but thought the code I submitted would be enough. (nobody told me that it wasn't except you now).
I will try to isolate the code and build a minimalistic app to be accessable from here.
Thanks for your reply.

[cartant]

@galanar Thanks. If you are able create a minimal reproduction, I will happily look into it.

[galanar]

Just an update.
I did a small project in stackblitz (https://angular-o2zd5r.stackblitz.io) faking the api and it worked as it should.
I will try to isolate the module containing these calls from my app and test it in a new project (offline).
Maybe the upgrade from Angular 5 to 6 hasn't been clean.

I'll keep you updated.

[Agraphie]

I have it the other way round (with rxjs 6.2.2). It works for me in Firefox but not in Chrome and Edge. I can reproduce this with this snippet

 of("This is not the greatest song in the world").pipe(mergeMap(q =>
        ajax({
            url: `http://localhost:7643/login`,
            method: "POST",
            body: "This is just a tribute"
        }).pipe(
            tap(e => console.log(e)),
            catchError(err => of(err))
        ))
    ).subscribe(m => console.log(m), e => console.log(e))

Also maybe #3949 and this issue are related?

[benlesh]

You're using Observable.forkJoin rather than importing forkJoin and using it directly.

I think that should resolve your issue. If you're still having problems, please file a new issue.