Kingsley Simon Kingsley Simon - 1 month ago 34
TypeScript Question

calling a service angular2 error 'Property 'then' does not exist on type 'Subscription'

I am trying to call service from my login.ts but i keep getting different errors. here is my code

login.ts

import { Component } from '@angular/core';
import { Auth, User } from '@ionic/cloud-angular';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { TabsPage } from '../tabs/tabs';
import { AuthService } from '../../services/auth/auth.service';
import {Observable} from 'rxjs/Rx';


@Component({
templateUrl: 'login.html'
})

export class LoginPage {
authType: string = "login";
error: string;
storage: Storage = new Storage();

constructor(public auth: Auth, public user: User, public navCtrl: NavController, public authService: AuthService) {}

facebookLogin() {
this.auth.login('facebook').then((success) => {
this.authService.signup(this.user.social.facebook).then((success) => {

});
});

}
}


auth.service.ts

import { Storage } from '@ionic/storage';
import { AuthHttp, JwtHelper, tokenNotExpired } from 'angular2-jwt';
import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Http, Headers } from 'angular2/http';

@Injectable()
export class AuthService {

jwtHelper: JwtHelper = new JwtHelper();
// contentHeader = new Headers({"Content-Type": "application/json"});
storage: Storage = new Storage();
refreshSubscription: any;
user: Object;
zoneImpl: NgZone;
idToken: string;
error: string;

constructor(private authHttp: AuthHttp, zone: NgZone) {
this.zoneImpl = zone;
// Check if there is a profile saved in local storage
this.storage.get('profile').then(profile => {
this.user = JSON.parse(profile);
}).catch(error => {
console.log(error);
});

this.storage.get('id_token').then(token => {
this.idToken = token;
});
}

public authenticated() {
return tokenNotExpired('id_token', this.idToken);
}

public signup(params) {
var url = 'http://127:0.0.1:3000/api/v1/register';
return this.authHttp.post(url, JSON.stringify(params))
.map(res => res.json())
.subscribe(
data => {this.storage.set('id_token', data.token)},
err => this.error = err
);
}
}


SO basically what i want is when the
facebookLogin()
is clicked, it goes to
auth.service.ts
and gets the
singup()
method which returns the value.

But i keep getting a
Property 'then' does not exist on type 'Subscription'.


What does this mean and how do i resolve this?

Answer

Change subscribe to toPromise() (don't forget to import toPromise)

  public signup(params) {
    var url = 'http://127:0.0.1:3000/api/v1/register';
    return this.authHttp.post(url, JSON.stringify(params))
        .map(res => res.json())
        .toPromise(
          data => {this.storage.set('id_token', data.token)},
          err => this.error = err
        );
  }

or to .map() and then use subscribe() instead of then() on the call site.

 public signup(params) {
    var url = 'http://127:0.0.1:3000/api/v1/register';
    return this.authHttp.post(url, JSON.stringify(params))
        .map(res => {
          let data = res.json();
          this.storage.set('id_token', data.token);
        });
  }
  facebookLogin() {
    this.auth.login('facebook').then((success) => {
        this.authService.signup(this.user.social.facebook).subscribe((success) => {

        });
    });

  }