androidangularionic-frameworkngfor

HTTP works in web but not working in actual android device ( IONIC mobile development )

Problem: my ngfor works perfecty on running web, but when ı emulate my app on real device, its just not working. ı looked all over the internet for solution but couldnt find, just as a close one(thats what ı think), some says this is ngZone issue, and ı dont have any idea what is it.

my service 

getMenuObject(): Observable<any> {

    return this.http
      .post("xxxxxxx.xxxxxxxxx.xxxxxxxxx.xxxxxxxxxxx",{ HotelId:25, GroupId:9 });
  }

my .ts

data: Array<any>=[]

ngOnInit(){
 this.httpService.getMenuObject().toPromise().then(x=>{
      this.data = x;
      console.log(this.data)
      if(x.IsGroup==true){
          this.splashScreen.hide();

       } else{
         this.router.navigate(['folder/Inbox']);
       }
    });
}

my html:

<ion-card  *ngFor="let otel of data.MobileHotelDefinitions" style="margin: 40px 0;border-radius: 0;">
        <ion-card-header style="padding: 0;">
          <ion-img (click)="goToHotel()" [src]="otel.MobileApplicationDefinition.GroupImageUrl"></ion-img>
          <div class="otelName">
            <div style="flex: 1;">{{otel.Name}}</div>
            <div style="color: goldenrod;">★★★★★</div>
          </div>
        </ion-card-header>
        <ion-card-content>
          Keep close to Nature's heart... and break clear away, once in awhile,
          and climb a mountain or spend a week in the woods. Wash your spirit clean.
        </ion-card-content>
      </ion-card>

my console: enter image description here

my app on web browser (ionic serve --o):

enter image description here

my app on real android device (huawei android 9): enter image description here

Solution

  • My problem was I was trying to use httpClient(angular one), but on mobile you need ionic http, So There are 2 http:

    1. import { HTTP } from '@ionic-native/http/ngx'; //for mobile http requests you have to use this (you can install it from here)
    2. import { HttpClient } from "@angular/common/http"; //for browser development you have to use this.

    And it was hard to implement the correct http way for mobile, to help you I leave an example mobile http request here. (to prevent having couple of http errors)

    My Service.ts

     constructor(private http:HTTP, private httpWEB: HttpClient) {

    this.http.setHeader('*', 'Access-Control-Allow-Origin' , '*');
    this.http.setHeader('*', 'Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    this.http.setHeader('*', 'Accept','application/json');
    this.http.setHeader('*', 'content-type','application/json');
    this.http.setDataSerializer('json');
  }

  post(url:string,body:any):Promise<any>{    
    return new Promise((resolve, reject) => {
      this.http.setDataSerializer('json');
      this.http.post(url, body, {}).then(res =>{
        resolve(JSON.parse(res.data));
      })
      .catch(err =>{
        reject(err);
      });
    });
  }

    in Config.xlm update this section to prevent clearTextTraffic error for http request

    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
            <application android:usesCleartextTraffic="true" />
        </edit-config>

    And also update your network_securty_config.xml

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">testapi.xxx.com</domain>
    </domain-config>
</network-security-config>