forkJoin is deprecated: resultSelector is deprecated, pipe to map instead
AngularRxjs6Angular Problem Overview
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
Angular Solutions
Solution 1 - Angular
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 - Angular
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 - Angular
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 - Angular
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 - Angular
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()
})
Solution 6 - Angular
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[]>;
Solution 7 - Angular
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[]>;