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

Question

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.

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');
  }

}

Solution 1

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> {
    // ...
}

Solution 2

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.

Comments

[Sudheer KB]

Import Observable import {Observable} from 'rxjs/Rx'; and make postLogin(data): Observable<any> {

[rjdamore]

this should be the accepted answer until a fix is pushed into the Angular2 platform. It's simple, and it works when this error pops up. Usually, the error is related to a specific method unless you have a lot of "like" methods, then the other solution above seems more appropriate.

[AsmaG]

It was that for me ! Thank you .

[Amr Eladawy]

for rxjs 6 import { Observable } from "rxjs";

[Kushal Jayswal]

This really helped. However I just imported { Observable } but never used in a code as I was playing with BehaviorSubject and Subject. But without Observable import it was giving error.

[ruffin]

@rjdamore I may be missing a 2016 ng2 bug, but this solution only works because it drops strong typing. Compiler: "Wait, you're returning a type that's not referenced." This solution: "Aw, don't worry about the type." That is, usually the line is get(url) { with no return type specified. Declaring a strongly typed return type seems a better solution than the grenade: get(url): SomeType {. <<< This solution (and sudheer's): "Okay compiler, let me tell you the correct type [which requires importing it too]."

[ruffin]

@KushalJayswal My guess is that you were using the type -- as a return value from a function, but without giving an explicit return type. As sudheer says, you should also make postLogin(data) { read postLogin(data): Observable<any> {. tslint yells at me if I only import. Doing both makes tslint (and future coders) happiest.

[Buisson Réda]

@ruffin I didn't say it was the best solution but sometimes you don't want to waste too much time on what I would call a compiler problem.