Angular 5 : Property 'then' does not exist on type 'Observable'

Question

I got this error message "[ts] Property 'then' does not exist on type 'Observable'.", how to solve it?

This is my Component :

  getUsers(){
    this.authService.getUsers().then((res) => {
      this.user = res;
      console.log(this.user);
    },(err) => {
      console.log(err);
    });
  }

This is my Service :

 getUsers(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://192.168.100.6:3000/users/data-tracer', {headers: headers})
    .map(res => res.json());
  }

Marco Barbero · Accepted Answer · 2018-04-10T07:57:51.757

20

You can call then on a Promise object, so because your service returns an Obaservable object, you need to transform into a Promise with the toPromise() method and use catch method to manage error in this way:

getUsers(){
    this.authService.getUsers()
    .toPromise()
    .then((res) => {
      this.user = res;
      console.log(this.user);
    })
    .catch(err=> { console.log(err) });
  }

Here you can see a DEMO. That's all.

edited Apr 10 '18 at 07:57

answered Apr 10 '18 at 06:01

Marco Barbero

1,460
1
12
22

why I got "[ts] Argument expression expected." in .catch(err=> { console.log(err) }); ? – Fatih Apr 10 '18 at 06:32
@Fatih. sorry, I had forgotten a parenthesis before `.catch` – Marco Barbero Apr 10 '18 at 07:19
If you need I put a [DEMO](https://stackblitz.com/edit/angular-promise-observable-example) on stackbliz – Marco Barbero Apr 10 '18 at 07:55

score 4 · Answer 2 · answered Apr 10 '18 at 05:04

"then" is a promise concept, RxJS is a bit different. If you want to sequence multiple calls, then you need to use forkJoin. If you just want to have a success handler, then use subscribe and catch.

getUsers(){
    this.authService.getUsers().subscribe((res) => {
      this.user = res;
      console.log(this.user);
    }).catch((err) => {
      console.log(err);
    });
  }

Make sure you understand the difference between promise and observable (Angular - Promise vs Observable) and make appropriate design decision.

score 1 · Answer 3 · edited Apr 22 '20 at 14:40

1

I solved it by using toPromise() function like this:

  getUsers(){
    this.authService.getUsers().toPromise().then((res) => {
      this.user = res;
      console.log(this.user);
    },(err) => {
      console.log(err);
    });
  }

edited Apr 22 '20 at 14:40

Tomislav Stankovic

3,080
17
35
42

answered Apr 22 '20 at 13:23

gandharv mahajan

21
2

score 0 · Answer 4 · answered Apr 10 '18 at 04:59

0

Try something like this.

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

...

this.yourService.getWhatYouWant()
.map(data => {
  // do some thing
})
.toPromise()
.catch(err => {
  // handle error
});

answered Apr 10 '18 at 04:59

Anuradha Gunasekara

6,553
2
27
37

score -1 · Answer 5 · answered Aug 16 '19 at 15:01

For use toPromise().then(), first is necesary to get the Object of Observable
I use this solution:

   import { of } from "rxjs";
----------------

 var clienteDocument = this.clienteCollection.doc(nuevocliente.cli_cedula);
    var clienteObservable = clienteDocument.valueChanges(); //Get Observable<Object> from Firebase
    var cliente = of(clienteObservable); //Obtengo el Objeto de Observable
    cliente.toPromise().then((cliente) => {  
      if (cliente == null) {
        //cliente not existe

      } else {
        //cliente exist :)

      }
    });

Angular 5 : Property 'then' does not exist on type 'Observable'

5 Answers5