Property map does not exist on type Observable<ArrayBuffer>

Question

I was trying to update from Angular v4 to Angular v6. I was replacing Http and HttpModule to HttpClient and HttpClientModule. So I imported HttpClient from @angular/common/http in a service and was trying to get results from DBpedia's API.Earlier I was using Http from @angular/http and my following code was working fine

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Jsonp, Headers, RequestOptions, URLSearchParams} from "@angular/http";
import {Store} from "@ngrx/store";
import * as fromRoot from '../reducers';
import {Observable} from "rxjs";

@Injectable()
export class KnowledgeapiService {

  server = 'http://lookup.dbpedia.org';
  searchURL = this.server + '/api/search/KeywordSearch?';
  homepage = 'https://susper.com';
  logo = '../images/susper.svg';

  constructor(
    private http: HttpClient,
    private jsonp: Jsonp,
    private store: Store<fromRoot.State>
  ) {}

  public getsearchresults(searchquery){
    let params = new URLSearchParams();

    params.set('QueryString', searchquery);

    let headers = new Headers({ 'Accept': 'application/json' });
    let options:any = new RequestOptions({ headers: headers, search: params });

    return this.http
      .get(this.searchURL, options).map(res =>

        res.json()

      ).catch(this.handleError);
  }

  private handleError (error: any) {
    // In some advance version we can include a remote logging of errors
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // Right now we are logging to console itself
    return Observable.throw(errMsg);
  }
}

but now when I migrated from Http dependency to HttpClient, In function getsearchresults(searchquery) whenever I use map function map data to json,it gives an error that map function does not exist on type Observable<ArrayBuffer> .Further removing map function gives same message for catch function. I followed this link https://github.com/angular/angular/issues/15548 but solution provided in it does not work for me.Where I am Wrong? Should I remove both map and catch function in getsearchresults(searchquery).

Answer 1

Basically you are facing issues with types. The above typescript code is not consistent. For example no type is defined for getsearchresults() function. No type is defined in this.http.get<NoTypeDefinedHere>

Further httpClient gives json response by default.And let headers = new Headers({ 'Accept': 'application/json' }); might not be needed here.

Check if you are using http module or httpClient module in import.

Check if you have imported rxjs/add/operator/map correctly