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

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

Solution 1:

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.

Solution 2:

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

Solution 3:

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

Solution 4:

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

Solution 5:

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