forkJoin is deprecated: resultSelector is deprecated, pipe to map instead

Question

I'm working on an Angular 6 project.

Running ng lint gives the following Warning:

"forkJoin is deprecated: resultSelector is deprecated, pipe to map instead"

 forkJoin(...observables).subscribe(

Any idea? Can't seem to find any information about this deprecation.

I just generated a brand new Angular application "ng new forkApp" with Angular CLI: 6.1.5

source:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'forkApp';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    console.log('ngOnInit...');

    const obs = [];
    for (let i = 1; i < 4; i++) {

      const ob = this.http.get('https://swapi.co/api/people/' + i);
      obs.push(ob);

    }

    forkJoin(...obs)
      .subscribe(
        datas => {
          console.log('received data', datas);
        }
      );

  }
}

"dependencies" section from package.json file:

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },

Once all three GET requests are done I got all data in "datas" array. The issue is that once I run: ng lint I got this:

C:\forkApp>ng lint

WARNING: C:/forkApp/src/app/app.component.ts[26, 5]: forkJoin is deprecated: resultSelector is deprecated, pipe to map instead

the first link when I google 'angular 6 forkjoin depricated' https://www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6 . and here is a link to the rxjs github, do a ctrl + f 'forkjoin' and you will see the pipe scenario that is is being suggested by the warning https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md — rhavelka, Sep 24 '18 at 20:37
I'm already using rxjs6 with angular6 so nothing like: Observable.forkJoin( -> to be converted into just forkJoin( also my import looks like this: import { forkJoin } from 'rxjs'; and the project does not use rxjs-compat, package.json ("rxjs": "^6.2.2",) — robert, Sep 24 '18 at 20:45
@rhavelka: that pipe thing is new, will check that, thanks for the feedback — robert, Sep 24 '18 at 20:47
please post the whole code, including imports. With `rxjs` they are of high importance — mchl18, Sep 24 '18 at 21:29
@undefinedMayNotBeNull just updated my question with full source. Let me know if you need any other information, and thanks for your feedback. — robert, Sep 25 '18 at 09:00
@rhavelka I just experimented with the link you wrote. For this line: forkJoin(...obs).pipe( map(x => this.resultSelector(x)) ).subscribe(); ng lint still gives the same warning. — robert, Sep 25 '18 at 14:31

score 97 · Accepted Answer · answered Nov 19 '18 at 19:53

97

I was able to fix this by getting rid of the ellipsis:

forkJoin(observables).subscribe();

As long as observables is already an array, it should have the same result.

answered Nov 19 '18 at 19:53

Lani

1,224
1
9
15

5

Thank you, deleting the three dots solved the warning. forkJoin(...obs) becomes just forkJoin(obs). – robert Nov 20 '18 at 21:40

score 56 · Answer 2 · edited Nov 12 '21 at 23:40

56

forkJoin(observable1, observable2)   // WORKING - deprecation warning
(memberObservables) => forkJoin(memberObservables)) // warning, too
forkJoin([observable1, observable2]) // WORKING - no warning
(memberObservables: Array<any>) => forkJoin(memberObservables)) // no warning

edited Nov 12 '21 at 23:40

activedecay

10,129
5
47
71

answered May 24 '20 at 21:08

radeveloper

926
2
12
20

1

It helped me, but why? Can you explain, please? – borkafight Nov 03 '21 at 15:12
forkJoin used to work in a way where you would pass multiple parameters where each parameter represented an observable. Now they changed it where it instead expects an array of observables. – Despacito 2 Nov 17 '22 at 15:09

mchl18 · Answer 3 · 2018-10-03T10:47:45.457

10

forkJoin should work. Which rxjs version are you using? Latest version should be doing this:

import { of, combineLatest, forkJoin } from 'rxjs';
import { map, mergeAll } from 'rxjs/operators';

Here the working code:

import { of, forkJoin } from 'rxjs';

const observables = [of('hi'), of('im an'), of('observable')];

const joint = forkJoin(observables);

joint.subscribe(
  s => console.log(s) 
)

Should output:

["hi", "im an", "observable"]

I tried reproducing this but I see no warning:

https://stackblitz.com/edit/angular-v4nq3h?file=src%2Fapp%2Fapp.component.ts

edited Oct 03 '18 at 10:47

answered Sep 24 '18 at 20:48

mchl18

2,119
12
20

running your snippet it looks like map is called for each value with forkJoin I got one call with all the results as an array, Is there any alternative to get only one call? – robert Sep 24 '18 at 21:03
are join using forkJoin as a seperate import or directly on an observable? – mchl18 Sep 24 '18 at 21:23
Make sure to use the latest import style: `import { forkJoin } from 'rxjs';` – mchl18 Sep 24 '18 at 21:24
1

I get the same warning with forkJoin + pipe + map way too – robert Sep 27 '18 at 19:35

score 9 · Answer 4 · answered Jan 07 '20 at 18:10

This gave this warning:

forkJoin is deprecated: Use the version that takes an array of Observables instead (deprecation)

 forkJoin(this.getProfile(), this.getUserFirstName(), this.getUserLastName())
      .subscribe(([res1, res2, res3]) => {
        this.OnboardingUser = res1;
        this.userFirstName = res2;
        this.userLastName = res3;
      }, err => { console.log(err); });

I have changed it like so: i.e. added []

 forkJoin([this.getProfile(), this.getUserFirstName(), this.getUserLastName()])
      .subscribe(([res1, res2, res3]) => {
        this.OnboardingUser = res1;
        this.userFirstName = res2;
        this.userLastName = res3;
      }, err => { console.log(err); });

score 4 · Answer 5 · edited Feb 01 '21 at 13:01

Works for me --- > forkJoin([observable1, observable2]) > WORKING - no warning

for example -

forkJoin([this.commonApiService.masterGetCall(END_POINT.NO_OF_WHEELS_MASTER),
    this.commonApiService.masterGetCall(END_POINT.BASE_LOCATION), this.commonApiService.masterGetCall(END_POINT.VEHICLE_TYPE_MASTER), this.commonApiService.masterGetCall(END_POINT.FUEL_TYPE_MASTER)])
      .subscribe(([call1Response, call2Response, call3Response, call4Response]) => {
        this.wheels = call1Response.data;
        this.baseLocation = call2Response.data;
        this.vehicleType = call3Response.data;
        this.fuelType = call4Response.data;
        console.log(
          call1Response, call2Response, call3Response, call4Response
        );
        this.generalService.hideLoader()
      })

did u write the Unit test for this function ? – Aditya Dalai Feb 05 '21 at 05:58 — Aditya Dalai, Feb 05 '21 at 05:58

score 3 · Answer 6 · answered Aug 14 '19 at 07:14

accroding to forkJoin.d.js , the forkJoin(...args) is deprecated, you can write the other way. for your source code, since you already have an array with same type, just pass your array will be OK.

//forkJoin.d.js
import { Observable } from '../Observable';
import { ObservableInput } from '../types';
export declare function forkJoin<T>(sources: [ObservableInput<T>]): Observable<T[]>;
export declare function forkJoin<T, T2>(sources: [ObservableInput<T>, ObservableInput<T2>]): Observable<[T, T2]>;
export declare function forkJoin<T, T2, T3>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>]): Observable<[T, T2, T3]>;
export declare function forkJoin<T, T2, T3, T4>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>]): Observable<[T, T2, T3, T4]>;
export declare function forkJoin<T, T2, T3, T4, T5>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>, ObservableInput<T5>]): Observable<[T, T2, T3, T4, T5]>;
export declare function forkJoin<T, T2, T3, T4, T5, T6>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>, ObservableInput<T5>, ObservableInput<T6>]): Observable<[T, T2, T3, T4, T5, T6]>;
export declare function forkJoin<T>(sources: Array<ObservableInput<T>>): Observable<T[]>;
export declare function forkJoin<T>(v1: ObservableInput<T>): Observable<T[]>;
export declare function forkJoin<T, T2>(v1: ObservableInput<T>, v2: ObservableInput<T2>): Observable<[T, T2]>;
export declare function forkJoin<T, T2, T3>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>): Observable<[T, T2, T3]>;
export declare function forkJoin<T, T2, T3, T4>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>): Observable<[T, T2, T3, T4]>;
export declare function forkJoin<T, T2, T3, T4, T5>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>): Observable<[T, T2, T3, T4, T5]>;
export declare function forkJoin<T, T2, T3, T4, T5, T6>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>, v6: ObservableInput<T6>): Observable<[T, T2, T3, T4, T5, T6]>;
/** @deprecated resultSelector is deprecated, pipe to map instead */
export declare function forkJoin(...args: Array<ObservableInput<any> | Function>): Observable<any>;
export declare function forkJoin<T>(...sources: ObservableInput<T>[]): Observable<T[]>;

score 1 · Answer 7 · answered Jun 23 '20 at 19:28

This is because they the RXJS team puts their deprecation warnings at the top of the file.

 import { Observable } from '../Observable';
import { ObservableInput, ObservedValueOf, ObservedValuesFromArray, SubscribableOrPromise } from '../types';

/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T>(v1: SubscribableOrPromise<T>): Observable<[T]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2>(v1: ObservableInput<T>, v2: ObservableInput<T2>): Observable<[T, T2]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>): Observable<[T, T2, T3]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>): Observable<[T, T2, T3, T4]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4, T5>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>): Observable<[T, T2, T3, T4, T5]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4, T5, T6>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>, v6: ObservableInput<T6>): Observable<[T, T2, T3, T4, T5, T6]>;
export declare function forkJoin<A>(sources: [ObservableInput<A>]): Observable<[A]>;
export declare function forkJoin<A, B>(sources: [ObservableInput<A>, ObservableInput<B>]): Observable<[A, B]>;
export declare function forkJoin<A, B, C>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>]): Observable<[A, B, C]>;
export declare function forkJoin<A, B, C, D>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>]): Observable<[A, B, C, D]>;
export declare function forkJoin<A, B, C, D, E>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>, ObservableInput<E>]): Observable<[A, B, C, D, E]>;
export declare function forkJoin<A, B, C, D, E, F>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>, ObservableInput<E>, ObservableInput<F>]): Observable<[A, B, C, D, E, F]>;
export declare function forkJoin<A extends ObservableInput<any>[]>(sources: A): Observable<ObservedValuesFromArray<A>[]>;
export declare function forkJoin(sourcesObject: {}): Observable<never>;
export declare function forkJoin<T, K extends keyof T>(sourcesObject: T): Observable<{
    [K in keyof T]: ObservedValueOf<T[K]>;
}>;
/** @deprecated resultSelector is deprecated, pipe to map instead */
export declare function forkJoin(...args: Array<ObservableInput<any> | Function>): Observable<any>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T>(...sources: ObservableInput<T>[]): Observable<T[]>;

I still see the warnings despite making the fix. Thanks for mentioning this issue. — ctaleck, Jan 06 '21 at 00:40

forkJoin is deprecated: resultSelector is deprecated, pipe to map instead

7 Answers7

Linked