This question is really about Angular 2 or TypeScript Object Oriented Programming that I am trying to implement in my Ionic 2 app. Would appreciate if somebody can please help me resolve with an issue I am facing right now. I tried to look around by Googl-ing it but didn’t get anything helpful.
I am getting the following error and not sure how to troubleshoot it:
WEBPACK_IMPORTED_MODULE_2_rxjs_Observable.Observable.fromPromise is not a function
Basically, my app connects with cloud backend to call different REST APIs. The REST API returns a Promise which I am trying to convert into an Observable. I have created a base class that has the function, to make this REST call, which returns an Observable.
Please allow me to explain:
So, in the app I have different services/providers for each of the functionalities, similar to the functionality’s individual pages (html, scss and ts files). For example:
-
home-page.ts -> home-service.ts -> REST call in Cloud
-
phone-detail-page.ts -> phone-service.ts -> REST call in Cloud
As soon as the user has successfully logged in, I set the ROOT page as HomePage (home-page.ts) in which, in the ionViewDidLoad() function I am calling a function from HomeService (home-service.ts) which in-turn is making a REST API call to get the home page data.
Another thing is, due to the cordova-javascript library this cloud service provides, I need to make the REST API call using a specific function on the cloud-connection object I get. Let’s say the function name is invokeMethod(URL, methodType). For example:
cloudConn.invlokeMethod('/home/data', {method = GET});
Now, since I have multiple services/providers that are going to call Cloud based REST API, I have created a base class for my services/providers. And, as soon as the cloud-connection is established successfully (of course, only upon login) I set the base class cloud-connection object with the one I get and then use it for all further cloud based REST calls.
Since I am dealing with Observable in all of my code except for this Promise based REST call, I am converting this Promise into an Observable in the base class and that’s where I am getting the error mentioned above.
Following is a sample of my base-class and a service/provider class that is extending the base class and calling the base-class function to make a REST API call.
base-service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export abstract class MyBaseService {
private static cloudConn : any;
constructor(public http: Http) {
}
protected setCloudConn(conn) {
MyBaseService.cloudConn = conn;
}
public invokeRestMethod(url: string, methodType: string): Observable<any> {
return Observable.fromPromise(MyBaseService.cloudConn.invokeMethod(url, { method: methodType }));
}
}
home-service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { MyBaseService } from './base-service';
@Injectable()
export class HomeService extends MyBaseService {
constructor(public http: Http) {
super(http);
}
getHomeData(): Observable<DataObj[]> {
return super.invokeRestMethod(myURL, 'GET')
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
}
}
home-page.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HomeService } from '../../providers/providers';
@Component({
selector: 'page-home',
templateUrl: 'home.page.html'
})
export class HomePage {
data: any[];
constructor(public navCtrl: NavController, public navParams: NavParams,
private homeService: HomeService) {
console.log('In HomePage constructor');
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage ');
this.homeService.getHomeData()
.subscribe(
(results) => {
this.data= results;
},
(error) => {
this.showError(error);
}
);
}
}
Hope I have provided all the required information. I would highly appreciate any help/pointers/suggestions to resolve this issue.
EDIT : Converting circular structure to JSON Error after getting past ‘fromPromise’ related error.
I thought continuing here since I have all the code already shown here.
After importing ‘fromPromise’ as pointed out by @AaronSterling, I was able to move forward. However, I am getting an error which I believe is in my HomeService (home-service.ts) following code:
getHomeData(): Observable<DataObj[]> {
return super.invokeRestMethod(myURL, 'GET')
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
}
at:
.catch((error:any) => Observable.throw(error.json().error || ‘Server error’));
Since, it’s directly going into “catch” here I am guessing something in my BaseService is not correct but not able to figure out what it can be as it’s a single line of code.
Any help will be highly appreciated.
Don’t know why I could not think about that.
Appreciated!