Map doesn't exist on Observable<Object> with angular 6.0.0 and rxjs 6.1.0

Question

Hi I\'m trying to follow a tutorial on angular but the tutorial was made in September. I believe the person used angular-cli 1.3.2. I\'m not sure which version of rxjs he wa

Answer 1

In Angular 6x with rxjs 6.3.3 you can do this. In the file(app.component.ts)

import { Component } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {    

  _url = 'http://...';
  constructor( private http: HttpClient ) { }
  articles: Observable<any>;

  // Method to get info
  getAPIRest() {       
    const params = new HttpParams().set('parameter', 'value');
    const headers = new HttpHeaders().set('Autorization', 'auth-token');
    this.articles = this.http.get(this._url + '/articles', { params, headers })
             .pipe( retry(3),
                    map((data => data),
                    catchError(err => throwError(err))));
  }

}

Answer 2

The Angular new version actually does not support .map. A few changes have been done in the new angular version. You can check on these by visiting the angular website, but here is a solution of these problems; run these commands in cmd destination of your project:

 npm install --save rxjs-compat

and enjoy with old technique, but don't forget to add these lines in shared service:

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch';

Answer 3

pipe is a method on Observable which is used for composing operators

Here is the way how you can use the new method pipe() in Version 6:

loadProducts() {
    return this.http.get("/api/products").
        pipe(
           map((data: any[]) => {
             this.products = data;
             return true;
           }), catchError( error => {
             return throwError( 'Something went wrong!' )
           });
        )
}

Keep in mind that with Version 6 you should now use catchError and throwError instead of:catch and throw. Here is the correct import with Version 6:

import { Observable, of, throwError, ...} from "rxjs"

import { map, catchError, ...} from "rxjs/operatros"

Answer 4

In rxjs@6 you can use from as standalone function:

import { from } from 'rxjs';

See also migration to rxjs6 guide

https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths

UPDATE

You need to switch to pipe syntax, make sure you import all operators used from rxjs/operators. For example:

import { map, filter, catchError, mergeMap } from 'rxjs/operators';

DOCUMENTATION

Answer 5

For some obscure reason rxjs-compat sometimes doesn't get picked up automatically, you can import it yourself, in polyfills.ts for example:

import 'rxjs-compat';

Answer 6

i was facing the same problem. lets change the way to import map. use the code which i have written below

import { map } from "rxjs/operators";

then use pipe with map. see the example for better understanding

import {Http,Headers,Response} from '@angular/http';
import { map } from "rxjs/operators";


@Injectable({
  providedIn: 'root'
})
export class ContactServiceService {

  constructor(private http:Http) { }

  getContactList(){
    return this.http.get('http://localhost:3000/contact')
    .pipe(map(res => res.json()));
  }

}