Property 'map' does not exist on type 'Observable<Response>'. angular for using Promise

Question

I am practicing Promise with angular and I am getting the following error:

Property 'map' does not exist on type 'Observable<Response>'.

Model

HTML

service:

import {Injectable} from '@angular/core';
import {Http} from "@angular/http";
import {IEmployee} from "./model/IEmployee";
import 'rxjs/add/operator/map';

@Injectable()
export class EmployeeServiceService {

    //A Promise handles a single event when an async operation completes or fails.
    //An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.

    constructor(private http: Http) { }

    getEmployees(empCode: string):Promise<IEmployee> {
            return this.http.get('assets/example.json').map((res: Response) => <IEmployee> res.json())
                .map((response: Response) => <IEmployee>response.json())
                .toPromise()
                .catch(this.handlePromiseError);
    }

    //this is a simple way to handle errors
    handlePromiseError(error: Response) {
        console.error(error);
        throw(error);
    }
}

-------------Update 1----------

I added the following import to the service:

import 'rxjs/add/operator/map';

Error:

Type 'ResponseType' is not assignable to type 'ResponseType'. Two different types with this name exist, but they are unrelated.
        Type '"cors"' is not assignable to type 'ResponseType'.
ERROR in 

/Users/drew/Desktop/Tutorials/UsingPromisingInsteadOfObserables/src/app/em ployee/employee-service.service.ts (15,80): Type 'Promise<any>' cannot be converted to type 'IEmployee'.

------------------------Update 2----------------------

New implementation in the service.

 constructor(private http: Http) { }

    getEmployees(empCode: string): Promise<IEmployee> {
        return new Promise<IEmployee>((resolve, reject) => {
            fetch('assets/example.json')
                .then(val => {
                    let r = val.json();
                    r
                        .then(v => { console.log(v) })
                        .catch(error => { console.log('error', error) })
                }).catch((err) => {
                console.log('request fail', err);
            })
        });
    }

Error:

Property 'then' does not exist on type 'void'.

Answer 1

You use map duplicated in response when the fetch callback after the first json().

modiefied

getEmployees(empCode: string):Promise<IEmployee> {
    return this.http.get('assets/example.json')
            .map((response: Response) => <IEmployee>response.json())
            .toPromise()
            .catch(this.handlePromiseError);
}

httpclient in angular is implement rxjs basically.It not be use promise or map, just set subscribe and you could got the data what you request.

rxjs

this.http.get('assets/example.json').subscribe(data => {
  // Read the result field from the JSON response.
  this.results = data['results'];
});

that http go.

use fetch

fetch('assets/example.json')
  .then(val => {
    let r = val.json();
    r
      .then(v => { console.log(v) })
      .catch(error => { console.log('get data fail', error) })
  }).catch((err) => {
    console.log('request fail', err);
  })

Answer 2

All i had to do was to add a missing import statement

import 'rxjs/add/operator/map'

Hope this helps someone.

Answer 3

Try like this :

service.ts

import 'rxjs/Rx';
import { IEmployee } from './';

@Injectable()
export class HomeService {
    getEmployees(empCode: string): Promise<IEmployee> {
        return new Promise<IEmployee>((resolve, reject) => {
            this.http.get('assets/json/sample.json')
                .map((res: Response) => {
                    resolve(<IEmployee>res.json())
                })
                .toPromise()
                .catch((error: Response) => {
                    reject(error);
                });
        });
    }
}

component.ts

import { IEmployee, HomeService } from './';

export class Component {

    constructor(private homeService: HomeService) { }

    ngOnInit() {
        this.homeService.getEmployees("username")
            .then(data => {
                console.log('data', data);
            })
    }
}