Hi guys,
we had have network connection problems with our app as we were using ionic 3. The app could not connect to any server - neither using 4G or WIFi.
Now that we migrated to ionic 4 (built from scratch as new app) the error seems to be gone. After using the new ionic 4 app on my device for about four weeks the error happened again. Setting my iPhone to flightmode on and off the app works fine.
Does anybody have this issue with ionic 4? What can i do to solve it?
Hi there,
make sure this solution to helpful for you…
just try this one…
install cordova plugin -----
ionic cordova plugin add cordova-plugin-networkinterface
npm install @ionic-native/network-interface
:::then use this code::::
import { Network } from '@ionic-native/network/ngx';
constructor(private network: Network) { }
...
// watch network for a disconnection
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});
// stop disconnect watch
disconnectSubscription.unsubscribe();
// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait.
// prior to doing any api requests as well.
setTimeout(() => {
if (this.network.type === 'wifi') {
console.log('we got a wifi connection, woohoo!');
}
}, 3000);
});
// stop connect watch
connectSubscription.unsubscribe();
How should this help me? My problem is that the phone has a network connection but the app can’t use it. Neither 4G or WiFi. Just a restart (for android) or going to flight-mode (on iphone) and restarting the app helps, so that the app could connect to the server.
sure… but we can sync network if any change on network mode…
i have already apply this code in my app in both platforms Android/ios…
just follow this step’s…
First, you need to create network provider and add following code,
import { Injectable } from '@angular/core';
import { AlertController, Events } from 'ionic-angular';
import { Network } from '@ionic-native/network';
export enum ConnectionStatusEnum {
Online,
Offline
}
@Injectable()
export class NetworkProvider {
previousStatus;
constructor(public alertCtrl: AlertController,
public network: Network,
public eventCtrl: Events) {
console.log('Hello NetworkProvider Provider');
this.previousStatus = ConnectionStatusEnum.Online;
}
public initializeNetworkEvents(): void {
this.network.onDisconnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Online) {
this.eventCtrl.publish('network:offline');
}
this.previousStatus = ConnectionStatusEnum.Offline;
});
this.network.onConnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Offline) {
this.eventCtrl.publish('network:online');
}
this.previousStatus = ConnectionStatusEnum.Online;
});
}
}
Now add this code to app.component file when initializing your app,
import { Component } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { NetworkProvider } from '../providers/network/network';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform,
public events: Events,
public network: Network,
public networkProvider: NetworkProvider) { }
initializeApp() {
this.platform.ready().then(() => {
this.networkProvider.initializeNetworkEvents();
// Offline event
this.events.subscribe('network:offline', () => {
alert('network:offline ==> '+this.network.type);
});
// Online event
this.events.subscribe('network:online', () => {
alert('network:online ==> '+this.network.type);
});
});
}
}
I still do not understand how this should help to solve the problem. The ionic app sometimes doesn’t have any connection to the network until i restart the device. This must be a bug in the framework, because other apps work fine.
send me screen shot’s for bugs/error
The bug i as simply as this:
open your app - app will connect to your server to fetch data - runs into timeout cause app has no network connection.
Every other app on the device still works fine. When you restart the device the app will work again fine.
Could it be your server’s network instead of the the App?
Try to make an iframe to some website and if it doesn’t work then we can assume it’s the App, if it works but your server doesn’t work, then it is your server.
Are you printing the error somewhere so we can check it?
I am not printing this error.
I will follow the tip with the iframe.
I do not think it is our server, because when i have that problem other users can connect to the server.
I just read that it’s an iPhone. Does the server you use have CORS? You must send * in the Access-Control-Allow-Origin header in the server’s response. You must do this or use the HTTP plugin from cordova (you can find it in Ionic’s docs).
BUT, that plugin doesn’t let you use Angular’s HttpClient. So if you wanna use Angular’s HttpClient you can do one of these:
If this doesn’t work, just print the error the server gives you with a console.log
Think CORS will be no problem, because it works. But then all of a sudden it doesnt work until you restart your phone.
Well, then print the error to know what’s going on when that happens. We are just guessing blindly 
I have the same identical problem but only when the app is published on the store (play or apple doens’t matter)
Sometime the app can’t connect, if I call a public rest endpoint (the same called from the app when error occurs) from chrome the JSON is immediately visible, switching to the app and retrying continue to give network error (time out)
I can’t find any solution
As of today i faced the error again.
I am not able to debug it with the web inspector of safari on my mac - the app is not shown there. (It is only shown there when i run the app from xcode on the device; not when i install it from appstore… weird).
I use this to get my data:
this.http.post(API + path, JSON.stringify(postData), {headers: headers})
.subscribe(res =>
{
resolve(res as T);
}, (err) =>
{
reject(err);
});
I will now print the “err” in a toast on one of my pages, rather than just to show a simple connection error message.