CODEWITHSUNDEEP
angular
Richa Shukla
Richa Shukla

Reputation: 31

Angular 2: Property 'map' does not exist on type 'Observable<Response>'

I am getting the below errors while making the get request .

Module "'node_modules/rxjs/Observable"' has no exported member 'Observable'. Property 'map' does not exist on type 'Observable'.

I have tried all the possible solution provide in StackOverflow but it did not work for me.

code:

 import { Injectable } from '@angular/core';
    import { IEmployee } from './employee';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class EmployeeService {
        private  _url : string = 'apiData/employeedata.json'
        constructor(private _http: Http) { }
        getEmployees(): Observable<IEmployee[]> {

            return this._http.get(this._url)
                .map((response: Response) => <IEmployee[]>response.json());
        }
    }

Upvotes: 1

Views: 1282

Answers (1)

Vikas
Vikas

Reputation: 12036

You are using Angular 6 not Angular 2
You are using HttpModule which is deprecated you should use HttpClientModule instead
In new HttpClientModule JSON is an assumed default and no longer needs to be explicitly parsed using res.json()
Before you can use the HttpClient, you need to import the Angular HttpClientModule into root Module.

    import { NgModule }         from '@angular/core';
    import { BrowserModule }    from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      imports: [
        BrowserModule,
        HttpClientModule,
      ],
//.......

You can tell HttpClient the type of the response to make consuming the output easier and more obvious.

Type checking of response can be done by using the type parameter

Http returns an observable and We can tell the HttpClient.get to return response as IEmployee type When we use http.get<IEmployee[]>(...) then it returns the instance of Observable<IEmployee[]> type.

In your component subscribe to Observable<IEmployee[]> to get instance of IEmployee

In your service 

import { Injectable } from '@angular/core';
    import { IEmployee } from './employee';
    import { HttpClient} from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';


    @Injectable()
    export class EmployeeService {
        private  _url : string = 'apiData/employeedata.json'
        constructor(private _http: HttpClient) { }
        getEmployees(): Observable<IEmployee[]> {

            return this._http.get<IEmployee[]>(this._url);

        }
    }

Apart from it RxJS v5.5.2+ has moved to Pipeable operators to improve tree shaking and make it easier to create custom operators

New Import

import { map} from 'rxjs/operators';

and change .map(...) to .pipe(map(..))
PS:NOT required if you are using HttpClientModule
Modified Code

 return this._http.get(this._url).pipe(
                    map((response: Response) => <IEmployee[]>response.json()));

I would suggest you to stop using HttpModule and go for HttpClientModule Instead

Upvotes: 2

Related Questions