Http.get() working but not working in build(Release/Debug) in Ionic 4

Question

I am trying get data from a simple api, it works fine in ionic serve(browser) , But when i build the app http call does not work. my Code is

this.http.get("http://example.com/api/routes").subscribe(response => {
 this.routes = response["routes"];
 for (let x in this.routes) {
 let a = this.routes[x].rou_stops;
 let b = a.split(",");
          for (let y in b) {
            this.newCit.push(b[y]);

          }
        }
   });

please help with this issue.

No sir, there are no runtime errors. – Dinesh Kumar Dec 12 '19 at 15:39 — Dinesh Kumar, Dec 12 '19 at 15:39
Are you getting any error you device debug console? – Najam Us Saqib Dec 12 '19 at 17:54 — Najam Us Saqib, Dec 12 '19 at 17:54
No sir @NajamUsSaqib , no any errors in debug – Dinesh Kumar Dec 12 '19 at 18:08 — Dinesh Kumar, Dec 12 '19 at 18:08

score 4 · Accepted Answer · answered Dec 12 '19 at 17:57

4

I am Guessing that your are getting this because of android changes its http architecture.

to make it working on Android go to your project root folder.

yourAppFolder > resources > android > xml > network_security_config.xml Change your network security config to blow code.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

answered Dec 12 '19 at 17:57

Najam Us Saqib

3,190
1
24
43

happy to hear that. :) – Najam Us Saqib Dec 12 '19 at 18:13
I don't have an xml folder – Ctfrancia Jan 02 '20 at 08:15
what directory structure you have? and which version of IONIC are you using? – Najam Us Saqib Jan 02 '20 at 08:20

jamesbcn · Answer 2 · 2021-07-14T19:29:51.437

IONIC 5 UPDATE

I had the same issue in Ionic 5 but made more complicated by the fact that HttpClient was not catching the error (I was simply getting back an unknown failed response).

In order to see that it was indeed a cleartext error I first had to change HttpClient for the Native HTTP plugin.

In Ionic 5 you can now enable cleartext in the capacitor.config.json file or replace the existing json file with a .ts version:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
                 appId: 'com.company.appname',
                 appName: 'My Capacitor App',
                 webDir: 'www',
                 server: {
                           'cleartext': true
                         }
              };

export default config;

docs

ITS WORKED, you save my days. I have used the same Angular HttpClient. — Yougeshwar Khatri, Aug 02 '21 at 11:14

score 2 · Answer 3 · answered Dec 12 '19 at 16:31

2

I think you can use Native HTTP plugin for the device use cases:

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

usage from the doc:

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

answered Dec 12 '19 at 16:31

Sampath

63,341
64
307
441

1

i used import { HttpClient } from "@angular/common/http"; is it a problem? it worked before without an issue. :( – Dinesh Kumar Dec 12 '19 at 17:43
Sometimes browser-based `HttpClient` doesn't work on the native device. At that time we need to use the native Http plugin. – Sampath Dec 12 '19 at 17:50
It worked but, some extra update updates needed. thanks. – Dinesh Kumar Dec 12 '19 at 18:13
Yes, I think configuration change is better and it is a new thing and I have learned it today. – Sampath Dec 12 '19 at 18:43
1

Not related to OP. I've had to use this plugin in the past, but IONIC5 now allows for HTTP Requests to be handled by Angular HttpClient and Interceptors (thank god). – billy_comic Jan 27 '21 at 16:07

score 2 · Answer 4 · answered Jan 25 '20 at 21:07

2

This works for me on the Ionic 4 app.

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

answered Jan 25 '20 at 21:07

Sampath

63,341
64
307
441

I will try this. – Dinesh Kumar Feb 01 '20 at 19:23

score 0 · Answer 5 · answered Aug 03 '21 at 14:31

Most of these answers, while they can work, are not safe options, since they open up non-https traffic.

cleartext is only meant for local testing with live-reload, and should not be used for production apps.

The real solution would be to use HTTPS endpoints or setup HTTPS on your own server via let's encrypt.

Http.get() working but not working in build(Release/Debug) in Ionic 4

5 Answers5

Linked