angular 5, RxJs { map } import doesn't work or i'm missing something?

Issue

I’m trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.

so i’ve found 2 map but none work…

import { map } from 'rxjs/operator/map'; 
import { map } from 'rxjs/operators/map';

the old fashion way that we need to remove

import 'rxjs/add/operator/map';

Here is the code i need to get to work!

  getValues(): Observable<Value[]> {   
    return this.http.get<Response<Values>>(this.url).map(reponse => {
      return reponse.data.values;
    });
  }

but the .map is not known for the observable,

Solution

The proper “modern” way to import RxJS operators is:

import { map } from 'rxjs/operators';

Along with the use of pipeable operators.

Your code becomes:

getValues(): Observable<Value[]> {   
  return this.http.get<Response<Values>>(this.url).pipe(
    map(reponse => reponse.data.values)
  );
}

Answered By – Jeto

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.