httpClient.get ok on emulator but not working on android device

Ionic Framework
1

Hello,
I tested my app on the emulator (ionic serve) and it’s working fine. My httpClient.get returns well the json data from the mySql database.
But when I publish the apk & install it on my android device, no data is displayed and I don’t succeed to catch any error.
Can you please advise how to fix that?

My ts file:

import { Component} from '@angular/core';
import { Observable } from 'rxjs';
import Place from '../../types';
import { throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@Component({
  selector: 'app-debug',
  templateUrl: './debug.page.html',
  styleUrls: ['./debug.page.scss'],
})
export class DebugPage {
  places: Observable<Place[]>;
  APIPlacesDebug: string;
  error1: string='err1';
  error2: string='err2';
  error0: string='err0';
  constructor(
    private _httpClient: HttpClient
  ) {
    this.APIPlacesDebug  = "http://www.**********.be/v/**/call.php?query=placesDebug";
    this.places = this.getAllPlaces_fullDebug(); 
   }
   getAllPlaces_fullDebug(): Observable<Place[]>{
    return this._httpClient.get<Place[]>(this.APIPlacesDebug+'&full=Y')
    .pipe(catchError(this.handleError));
  }
   private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
      this.error0='1st:';
      this.error1= error.error.message;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
        this.error1=error.status+' ';
        this.error2=error.error;
        this.error0='2nd:';
    }
    // Return an observable with a user-facing error message.
    return throwError(
      'Something bad happened; please try again later.');
  }
}

My html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Debug</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding class="form-content" [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title size="large">Debug</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-item>
      <ion-label color="primary">{{error0}}</ion-label>
    </ion-item>    
    <ion-item>
      <ion-label color="primary">{{error1}}</ion-label>
    </ion-item>
    <ion-item>
      <ion-label color="primary">{{error2}}</ion-label>
    </ion-item>
      <ion-item *ngFor="let place of (places | async)">
        <ion-label color="primary">{{place.name}}</ion-label>
      </ion-item>
</ion-content>

Please help :slight_smile:
Vincent

2

Please don’t redact URLs when posting questions that involve network trouble. They are typically crucial information for troubleshooting. Fortunately, you left just enough in that I can speculate that your problem may go away if you use an https instead of an insecure http endpoint.

3

Sorry for that, my goal was just to avoid any hacking or spamming…
Apart of that, HUGE thanks, switching to https fixed the issue :star_struck: I would never found it with you, thanks a lot ! :partying_face:
Keep in mind that you made my day today, thanks a lot !