CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
Manspof
Manspof

Reputation: 357

Error TS4053: Return type of public method from exported class has or is using name ‘Observable’

i'm trying to build app with ionic 2 & angular 2, i get this error while i try to run my app. i build another project to check and the same problem, i really confused on this problem.

error in photo

this is my service code

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Storage} from '@ionic/storage';
import {NavController} from "ionic-angular";


/*
  Generated class for the MyService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MyService {
  public local :Storage;
  public getsession : any;
  constructor(private http: Http, private navCtrl : NavController) {
    this.local = new Storage();
    console.log("my-service page")
  }

  postLogin(data){
    let link = "http://adirzoari.16mb.com/login.php";
    return this.http.post(link,data)
        .map(res => res.json())
  }

  checkToken(){
    return this.getsession =this.local.get('token');
  }

}

Upvotes: 28

Views: 27886

Answers (3)

DoronG
DoronG

Reputation: 2663

If you do not want to or cannot import the returned type (e.g. it is not exported), you can type the return based on the return type of the called method. In this case:

postLogin(data): ReturnType<ReturnType<Http["post"]>["map"]> {
  ...
}

Upvotes: 0

sebaferreras
sebaferreras

Reputation: 44669

I only add this as an answer so it could help other SO users facing the same issue.

Just like @sudheer-kb mentioned, in order to solve that issue, you need to explicitly import the Observable class:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
// ...
import { Observable } from "rxjs/Observable"; // <- add this import

And then give your method an explicit return type (also thanks @ruffin for your comment):

postLogin(data): Observable<any> {
    // ...
}

Upvotes: 66

Buisson R&#233;da
Buisson R&#233;da

Reputation: 171

I had a similar issue, it seems related to a problem with return types of methods. What worked for me is to simply add ": any" just after declaration of my methods, like this for example :

get(url) : any {
  //code
}

I don't think it's a good habit, but it can be a good fix sometimes.

Upvotes: 13

Related Questions