Ionic/angular Android Http not working

Ionic Native
1

Hello I have an ionic/angular project which has some http GET requests. It was fully working on browser, iOS and Android, where the HTTP request would get executed and details displayed in my ionic UI. However as of recently, after updating Android Studio etc, I noticed that my android native version is broken and I am not getting any HTTP requests.

Every time a GET request is executed I see this error in the log →

File: http://localhost/vendor-es2015.js - Line 46777 - Msg: ERROR [object Object]…

I have a service running the foreground, where I can make those http calls in the emulator’s browser and the requests are coming in, and the service works just fine… the ionic app though is empty. Any advice would be appreciated.

Thanks!

2

Hmm, not a lot to go off of from that.

Is it happening in a new project as well? Can you test and provide a sample in the form of a github url?

4

I created a fresh ionic project and used itunes api… seems to work, I then added the itunes api to my project and it is giving me the same error… So it seems like it is to do with my project… some settings… somewhere…

5

Are you using capacitor or cordova?

Either way, you could attempt to remove the platform and add it back?
Kind of a forceful way to fix it, but if there’s some configuration issue, that could reset it.

6

are you using an emulator or real device? If emulator, take care about network configurations.

7

I tried both, I also checked network config of the emulator, however, it makes no difference with the localhost. (127.0.0.1 and 10.0.2.16 for emulator)

8

could be an compilation error, your app is running ok or it’s in blank screen?

9

Runs ok, the components/pages are empty though as the http isn’t returning anything

10

Hi man, after hours of debugging… I noticed that there is an issue with polling… it works perfectly fine on iOS… I’m using rxjs and rxjs/operators to implement my poll…

my poller looks as such…

private request(route: any) {
    let apiUrl = this.host + route; // this.host+'route' = "127.0.0.1:8909/'b'"
    let b$ = this.http.get(apiUrl);
    
    return this.polledB$ = timer(0, 2000).pipe(
      
      // merge(this.manualRefresh),
      concatMap(_ => b$),
      map((res: {status: boolean, func: string, message: string, response: {b: T}}) => res)


    );
  }
11

hi I am getting a similar error .I am using ionic 5 . Everything works fine on the browser . The app connects to nodejs back-end server . The HTTP calls work fine in the browser but nothing is returned in android . I did not really understand what worked for you . @mhartington @ThonyFD12

I have implemented CORS in the back-end server to set headers.

Any help would be much appreciated . TIA

Ionic CLI : 6.9.1 (C:\Users\debor\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.1.2
@capacitor/core : 2.1.2
System:

NodeJS : v12.16.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
Utility:

cordova-res : not installed
native-run : not installed

12

Did you found a work around for this issue?

13

Try using XML http Request . See below reference should help .

var oReq = new XMLHttpRequest();

oReq.onload = function(e) {
  var arraybuffer = oReq.response; // not responseText
  /* ... */
}
oReq.open("GET", url);
oReq.responseType = "arraybuffer";
oReq.send();
14

@deborahj having a pretty similar issue myself - did you solve it?

15

Hi Richard ,

what i realized is that the angular httpClient has not worked on the android mobile app. So you can make http request using any two modules below

  1. Using ionic’s native http module
//all other imports 
import { HTTP } from '@ionic-native/http/ngx';  

export class TestPage implements OnInit {
constructor(private _ihttp: HTTP)

async getdata(){
const res = await this._ihttp.get(this._url, {}, {})
    console.log(res);
    console.log(res.data);
}

}

insert this in the constructor

  1. Using_XMLHttpRequest
    https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest 
var oReq = new XMLHttpRequest();
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

I am using XMLHttpRequest because ionic’s native library is not supported to run in browser . So it always requires the app to be run in an actual device which increases testing time .
XMLHttpRequest this works well in both browser and android device . I have not tested it on ios .

Hope this helps !!!

PS : Also latest Android versions do not support http use https .

16

Thanks - are you sure that the Angular HttpClient does not work on Android? Is that documented anywhere? (we’ve always used it without issues - though maybe that’s the cause of the issues I am having now?)

17

havent found any documentation that says so .
just that it did not work for me . Would like to add that surprisingly on one of the devices (Motorolla android phone) the http client from angular did work Also this device had older android version (< Pie) . So to say that Angular HttpClient does not work on Android i might not be 100% correct .

But in all other devices the Angular HttpClient was not returning any response. So i had to take resort to the above two libraries.

If angular HTTP Client works for you please share .

18

Yes the solution is to ensure you allow cors in your json config file, this will allow you to make your http requests. I noticed mine was off in my project and hence why it was working everywhere except for Android

19

Do you mean to say that angular http module can be used in android device if cors is enabled? i tried but this did not work for me.

20

it should make sure that your end point has ssl i.e https with core enabled access origin *

21

where / how do you do this in the json config file? I’m not getting CORS errors back or anything - I’m getting nothing!