The error message "Property 'then' is not available on type 'void' within Ionic 2" is displayed

Question

The error message "Property 'then' is not available on type 'void' within Ionic 2" is displayed

When retrieving data from the Google API within the function of the details.ts file, I have set up a service as shown below. However, I am encountering a Typescript error stating

Property 'then' does not exist on type 'void'

.

this.typeApi.getTypeDetails(baseUrl).then(data => {
});

In the type-api.service.ts file, I am fetching data from the Google API in the following manner:

import { Injectable } from '@angular/core';
import { Http /*, Response*/ } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TypeApi {

constructor(public http: Http ) {}

getTypeDetails(PlaceUrl){
        this.http
        .get(PlaceUrl)
        .map(res => res.json())
        .subscribe(
            (data) => data,
            (err) =>  err); // Handle if fails
}

}

And in the package.json file:

"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic-native/core": "3.1.0",
"@ionic-native/geolocation": "^3.4.4",
"@ionic-native/launch-navigator": "^3.4.4",
"@ionic-native/splash-screen": "3.1.0",
"@ionic-native/status-bar": "3.1.0",
"@ionic/storage": "2.0.0",
"font-awesome": "^4.7.0",
"ionic-angular": "2.3.0",
"ionic2-rating": "^1.2.0",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
  },
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
},

angular typescript ionic2

Answer 1

Answer №1

To ensure proper execution, it is recommended to return a Promise from the method getTypeDetails, as shown below:

getTypeDetails(PlaceUrl){
    return this.http
        .get(PlaceUrl)
        .map(res => res.json())
        .toPromise();
}

However, returning just the Observable is often considered the more efficient approach:

getTypeDetails(PlaceUrl){
    return this.http
        .get(PlaceUrl)
        .map(res => res.json());
}

Then, use the following code snippet to subscribe to the data:

this.typeApi.getTypeDetails(baseUrl).subscribe(data => {
});

Answer 2

To ensure proper execution, it is recommended to return a Promise from the method getTypeDetails, as shown below:

getTypeDetails(PlaceUrl){
    return this.http
        .get(PlaceUrl)
        .map(res => res.json())
        .toPromise();
}

However, returning just the Observable is often considered the more efficient approach:

getTypeDetails(PlaceUrl){
    return this.http
        .get(PlaceUrl)
        .map(res => res.json());
}

Then, use the following code snippet to subscribe to the data:

this.typeApi.getTypeDetails(baseUrl).subscribe(data => {
});

Answer 3

Answer №2

I agree with Gunter's suggestion. Additionally, I recommend setting the method (function) return type whenever possible to indicate the type of result the caller will receive. For example:

Assuming that your TypeApi will be used by multiple callers.

public getTypeDetails(apiUrl: string) : Observable<any>{
       return this.http.get(apiUrl)
          .map(res => res.json())
          .catch((error) => this.handleError(error)); 
}

//Here is an example of the handleError function:

private handleError (error: any) {
    // You could delve deeper into the error for a more detailed message or utilize a remote logging system
    let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log errors to the console
    return Observable.throw(errMsg);
  }

When calling this method, you must subscribe to the returned result:

this.typeApi.getTypeDetails(theUrl).subscribe(result => {
    // This is where you handle success, similar to handling success in AJAX calls
    // Make use of the received data
   }, 
   error => {
       // This is where you handle errors, similar to how errors are handled in AJAX calls
       // Handle the error appropriately
   }
);

Answer 4

I agree with Gunter's suggestion. Additionally, I recommend setting the method (function) return type whenever possible to indicate the type of result the caller will receive. For example:

Assuming that your TypeApi will be used by multiple callers.

public getTypeDetails(apiUrl: string) : Observable<any>{
       return this.http.get(apiUrl)
          .map(res => res.json())
          .catch((error) => this.handleError(error)); 
}

//Here is an example of the handleError function:

private handleError (error: any) {
    // You could delve deeper into the error for a more detailed message or utilize a remote logging system
    let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log errors to the console
    return Observable.throw(errMsg);
  }

When calling this method, you must subscribe to the returned result:

this.typeApi.getTypeDetails(theUrl).subscribe(result => {
    // This is where you handle success, similar to handling success in AJAX calls
    // Make use of the received data
   }, 
   error => {
       // This is where you handle errors, similar to how errors are handled in AJAX calls
       // Handle the error appropriately
   }
);

The error message "Property 'then' is not available on type 'void' within Ionic 2" is displayed

Answer №1

Answer №2

Similar questions

Steps for converting an Array of tuples into a Union of Tuples

Converting the following ngRx selector to a boolean return – a guide

Understanding authorization and user roles within an Angular 2 application utilizing Microsoft Graph

Encountered a Runtime Error: Uncaught promise rejection - couldn't locate removeView

Validation of email forms in Angular 5

Creating a primary index file as part of the package building process in a node environment

How can we limit the CSS properties that can be used in an interpolated manner by defining a restricted TS type for CSS props based on emotions?

Initiating a GET request to execute an SQL query with specified parameters

What is the process for configuring the directive to establish a drag-and-drop area within Angular?

In a Typescript Next Js project, the useReducer Hook cannot be utilized

Verify the accuracy of each object in an array by comparing it to an enum and confirming its validity

Transform TypeScript class into an object

Discovering updates to a read-only input's [ngModel] binding in an Angular 2 directive

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

Issue with PixiJS: Clicking on a line is disabled after changing its position

Tips for saving multiple pieces of data in a single field with Laravel

Angular Universal causes SASS imports to malfunction

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

Is it possible to determine the specific type of props being passed from a parent element in TypeScript?

Utilize JavaScript libraries in a TypeScript project