Can't subscribe to results of combineLatest

Question

My app broke when I updated to RxJS 6. I got most of it working but this one method has me stumped.

Previously we had an array of observables being flatMapped and then used combineLatest like this:

const newObservable = myArrayOfObservables
   .flatMap(observables => {
       return Observable.combineLatest(observables);
   });

And I could subscribe to the newObservable and get an array of the latest outputs from all the others.

Now I'm trying to do something like this:

const mergedList$ = chatList$.pipe(
  mergeMap(res => {
    return combineLatest(res);
  }));

This gives me one of those really long and convoluted

Argument of type '(res: Observable<{ $key: string; }>[]) => OperatorFunction<{}, [{}, Observable<{ $key: string; }>]>' is not assignable to parameter of type '(value: Observable<{ $key: string; }>[], index: number) => ObservableInput<{}>'. Type 'OperatorFunction<{}, [{}, Observable<{ $key: string; }>]>' is not assignable to type 'ObservableInput<{}>'. Type 'OperatorFunction<{}, [{}, Observable<{ $key: string; }>]>' is not assignable to type 'Iterable<{}>'. Property '[Symbol.iterator]' is missing in type 'OperatorFunction<{}, [{}, Observable<{ $key: string; }>]>'.

which quite frankly my dyslexia prevents me from parsing.

If I just return res in the above, and then try

const mergeCombo = combineLatest(mergedList$);

now mergeCombo is not an observable. Instead it's a

OperatorFunction<{}, [{}, Observable<{ $key: string; }>]>

It could be worth noting that my original observables are being emitted by AngularFireObject.snapshotChanges()

Answer 1

You don't show how you imported combineLatest. It sort of looks like you are importing it as an operator, which has been deprecated.

Make sure you import it like so:

import {combineLatest} from "rxjs";

Then your original code should work just fine:

const mergedList$ = chatList$.pipe(
  mergeMap(res => combineLatest(res))
);