Property 'toPromise' does not exist on type 'Observable'

Question

import { Headers, Http } from '@angular/http';

@Injectable()
export class PublisherService{

    private publishersUrl = 'app/publisher';

    constructor(private http: Http) { }

    getPublishers(): Promise<Publisher[]>{
        return this.http.get(this.publishersUrl)
                   .toPromise()
                   .then(response => response.json().data) 
                   .catch(this.handleError);
    }
}

I am getting this error:

Property 'toPromise' does not exist on type 'Observable'.any

Normally, it's not a good idea to convert observables into promises. Observables are way more powerful — Dinistro, Jun 29 '16 at 06:21
For anyone else who stumbles on this (it was the top google link for me), see the below which comes from one of the linked answers https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507 As it says, in Visual Studio 2015 you can fix this by updating your version of typescript via https://www.microsoft.com/en-us/download/details.aspx?id=48593 — tony, Nov 02 '16 at 16:12

score 157 · Accepted Answer · answered Jun 29 '16 at 06:20

157

You need to add the operator like this:

import 'rxjs/add/operator/toPromise';

This is needed for every rxjs operator you want to use.

answered Jun 29 '16 at 06:20

Dinistro

5,701
1
30
38

3

please update your answer for angular above version 2 (preferably 8 or 9) – tatsu Jan 29 '20 at 10:38
toPromise is now marked as deprecated. use lastValueFrom instead. – Hardik Patel Oct 03 '22 at 05:30

score 9 · Answer 2 · answered Jul 26 '16 at 12:41

9

Try adding 'Response' to your import statement from '@angular/http' like this :

import {Http, Headers, Response} from '@angular/http';

Also i noticed you don't import Ingectable from angular core although you use @Injectable decorator.

import { Injectable } from '@angular/core';

answered Jul 26 '16 at 12:41

Shai Barak

129
8

I have also updated the systemjs.config.js and followed the suggestions on this page. Now its fine. – Abhishek Sharma Jul 27 '16 at 06:34
hi MiHawk, what you did update in the systemjs.config.js?, I am also following the https://angular.io/docs/ts/latest/tutorial/toh-pt6.html, got stuck here – khoailang Oct 05 '16 at 03:47
So what was the answer, it isn't stated what fixes this issue – Jon B Oct 06 '16 at 04:51
1

I installed the latest version of TypeScript tools version 2.X https://www.microsoft.com/en-us/download/details.aspx?id=48593 and this fixed the problem -- but created 209 others. The rest of the fix was to exit Visual Studio and run >npm upgrade --save (as admin). a couple of packages failed to update, but when I start Visual Studio Bower/npm automatically updated the rest and all is good. – Jon B Oct 07 '16 at 02:40

score 5 · Answer 3 · edited May 22 '19 at 07:41

5

use this import at the beginning

import {Observable} from "rxjs/Rx";

edited May 22 '19 at 07:41

Liam

27,717
28
128
190

answered Sep 27 '16 at 07:59

Imal Hasaranga Perera

9,683
3
51
41

4

really bad idea, this imports the entire RXJS library which is really big and will massively increase your page load times. – danday74 Nov 22 '16 at 08:52
I don't think so.. we use import { component } from "@angular/core"; many places right so this should be also bad then ? – Imal Hasaranga Perera Nov 22 '16 at 09:34
4

import {Observable} from 'rxjs/Observable'; is what you want ... this will import just Observable, if you do rxjs/Rx then it will import all of RxJS and only use the Observable, a real slow down. Remove all reference to rxjs/RX and watch the massive reduction in net requests and the speed up of page load speed. – danday74 Nov 22 '16 at 10:49

Property 'toPromise' does not exist on type 'Observable'

3 Answers3

Linked