1

I am trying to access web api methods from Angular 2 application, i am able to get the records using web api. But the problem is, service.ts file showing Property 'map' does not exist on type 'Observable' error.

Sample Code:

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/Rx';

    @Injectable()
    export class ContactServices 

    {

        private url = 'http://localhost:51498/api/test/';
        constructor(private http: Http) { }

        getContacts():Observable<Object[]> {
            return this.http.get(this.url + 'GetContacts')
                .map(response => response.json())
                .catch(error => {
                    console.log(error);
                    return Observable.throw(error);
                });
        }

        getContactById(id: number) {
            return this.http.get(this.url + 'GetContactList/' + id)
                .map(response => <Contact[]>response.json())
                .catch(error => {
                    console.log(error);
                    return Observable.throw(error);
                });
        }
    }

export class Contact {
    Id: number;
    Name: string;
    Details: string;
}

I am using below versions,

  1. webpack 2.2.1
  2. angular 2.4.9
  3. node 6.10.0
  4. npm 4.1.2
  5. typescript 2.2.1
Venkateswaran R
  • 438
  • 2
  • 5
  • 18
  • Possible duplicate of [Property 'map' does not exist on type 'Observable'](http://stackoverflow.com/questions/37208801/property-map-does-not-exist-on-type-observableresponse) – ranakrunal9 Mar 09 '17 at 10:50
  • @ranakrunal9.. Op has already imported `rxjs/Rx` – Suraj Rao Mar 09 '17 at 10:52
  • i have tried using 'rxjs/Rx' and 'rxjs/add/operator/map' still it's showing error – Venkateswaran R Mar 09 '17 at 10:57
  • Are you sure you have put *all* relevant code? I dont see `Contact` import.. – Suraj Rao Mar 09 '17 at 11:00
  • I have put all relevant codes and also i am able to access DB records using web api. Contact is just a model object which is export class Contact { Id: number; Name: string; Details: string; } – Venkateswaran R Mar 09 '17 at 11:03
  • @VenkateswaranR I assume you have defined the response you are getting in the component like `Contact[]` but you are returning an `Observable` try to change that to `Observable` if it makes any difference. – AT82 Mar 10 '17 at 19:40

2 Answers2

1

The problem is TypeScript version. I have mentioned that, it is 2.2.1 version but my system is having 1.8.3 version. So only the problem occur. Thanks for who and all reviewing this problem.

Venkateswaran R
  • 438
  • 2
  • 5
  • 18
0

I am using vs code and this problem was solved by update typescript version in package.json.

  • step 1: npm install -g typescript@latest
  • step 2: check typescript version: tsc --v
  • step 3: Update typescript version in package.json to the version got from step 2.

Works for me.

Rohit Poudel
  • 1,793
  • 2
  • 20
  • 24
Frank
  • 1
  • 1