CODEWITHSUNDEEP
angularrxjsangular6tslint
Phaze
Phaze

Reputation: 545

Angular 6 ng lint combineLatest is deprecated

I recently updated from Angular 5 to Angular 6.

I'm getting this warning combineLatest is deprecated: resultSelector no longer supported, pipe to map instead. Rxjs is version 6.1.0, tslint is 5.10.0, Angular CLI is 6.0.0 and Typescript 2.7.2. I'm using it like this:

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => ({auth, url}),
);

I've tried it also like this:

empty().pipe(
combineLatest(...),
  ...
)

But this gives me: combineLatest is deprecated: Deprecated in favor of static combineLatest and empty is also deprecated in favor of its static version.

Upvotes: 34

Views: 39056

Answers (8)

Rui Marques
Rui Marques

Reputation: 8904

Unfortunately you might also get that tslint error if you import combineLatest from operators:

import { combineLatest } from 'rxjs/operators';
    
combineLatest(...array);

instead of,

import { combineLatest } from 'rxjs';
    
combineLatest(...array);

Upvotes: 12

samivic
samivic

Reputation: 1310

i used depricated combineLatest to combine those two observables this.route.paramMap + this.route.queryParamMap:

combineLatest(this.route.paramMap, this.route.queryParamMap)
  .subscribe(combined => {
    const idFollower = combined[0].get('id');
    const page = combined[1].get('page');
  })

Upvotes: 0

Trevor
Trevor

Reputation: 13457

This error can also be caused by passing in an array of Subscription items, instead of actual observables, lol. (I got really sloppy on this one.)

WRONG!

const foo = Foo$.subscribe(f => {
  // do something with f here
})

const bar = Bar$.subscribe(b => {
  // do something with b here
})

combineLatest([foo, bar]).subscribe(([f, b]) => {
  // do something after both foo$ and bar$ have emitted something
})

CORRECT!

const foo$ = Foo$.pipe(
  tap(f => {
    // do something with f here
  })
)

const bar$ = Bar$.pipe(
  tap(b => {
    // do something with b here
  })
)

combineLatest([foo$, bar$]).subscribe(([f, b]) => {
  // do something after both Foo$ and Bar$ have emitted something
})

Upvotes: 0

Abinesh Devadas
Abinesh Devadas

Reputation: 1547

combineLatest is deprecated: resultSelector no longer supported, pipe to map instead

The above warning is recommending to remove the resultSelector the last function you provided in combineLatest observable and provide it as part of map operator as follows

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
);

const result$ = a$.pipe(
  map(results => ({auth: results[0], url: results[1]}))
)

UPDATE:

If you see combineLatest is deprecated: Pass arguments in a single array instead then just add []:

const a$ = combineLatest([
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
]);
    
const result$ = a$.pipe(
  map(results => ({auth: results[0], url: results[1]}))
)

Upvotes: 83

Prezes
Prezes

Reputation: 21

I would solve that this way:

auth$ = this.aStore.select(b.getAuth);
url$ = this.cStore.select(b.getUrl);

combinedResult$ = combineLatest([this.auth$, this.url$]).pipe(
    map(([auth, url]) => ({auth, url}))
)

Upvotes: 0

jenson-button-event
jenson-button-event

Reputation: 18951

Unlike the deprecated versions, combineLatest accepts an Array of Observable and returns an array containing the latest values from each. Every stream has to yield in order for combineLatest to yield.

fruitType$ = combineLatest([this.entity$, this.datasetStateService.get$('Fruits')])
  .pipe(map(data => {
    const entity = data[0];
    const dataset = data[1];
    return {
       isApple: (dataset.find(ds => ds.label === 'Apple') as DataItem).id === entity.fruitId,
       isOrange: (dataset.find(ds => ds.label === 'Orange') as DataItem).id === entity.fruitId
    }
}));

Upvotes: 5

Valeriy Katkov
Valeriy Katkov

Reputation: 40612

In my case it's because I explicitly set generic argument, so an incorrect combineLatest overload was selected. To get rid of the warning I've changed

combineLatest<void>([
    firstObservable$,
    secondObservable$
]);

to

combineLatest([
    firstObservable$,
    secondObservable$
]).pipe(
    mapTo(undefined)
);

Upvotes: 2

Basavaraj Bhusani
Basavaraj Bhusani

Reputation: 5673

For trailing comma error, remove the comma after (auth, url) => ({auth, url})

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => ({auth, url}),  // Remove this comma.
);

For missing import error, Make sure you have imports for all the external var's or classes you are using in the file.

Example, in this case, if you havent imported combineLatest, then import it

import { combineLatest } from 'rxjs'; // For RxJS 6.x

import { combineLatest } from 'rxjs/operators'; // For RxJS 5.x

Upvotes: 1

Related Questions