Update:
I have updated the Ionic 4.6.2
(latest) and it gives below exception on offline mode.
Network status changed {connected: false, connectionType: "none"}connected: falseconnectionType: "none"__proto__: Object
bootstrap:145 GET http://localhost:8100/85.js net::ERR_INTERNET_DISCONNECTED
requireEnsure @ bootstrap:145
webpackAsyncContext @ .*\.entry\.js$ include: \.entry\.js$ exclude: \.system\.entry\.js$ namespace object:407
loadModule @ chunk-09ec7fc0.js:61
(anonymous) @ chunk-09ec7fc0.js:1468
step @ tslib.es6.js:99
(anonymous) @ tslib.es6.js:80
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone.js:910
__awaiter @ tslib.es6.js:69
initializeComponent @ chunk-09ec7fc0.js:1450
(anonymous) @ chunk-09ec7fc0.js:1604
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
Promise.then (async)
(anonymous) @ zone.js:1092
ZoneAwarePromise @ zone.js:910
Ctor.then @ zone.js:1091
createOverlay @ chunk-d83bfeae.js:30
create @ chunk-d83bfeae.js:8
push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.create @ fesm5.js:4874
(anonymous) @ show-toast.service.ts:13
step @ tslib.es6.js:99
(anonymous) @ tslib.es6.js:80
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone.js:910
__awaiter @ tslib.es6.js:69
push../src/app/services/utilities/show-toast.service.ts.ShowToastService.showNetworkStateErrorToast @ show-toast.service.ts:12
(anonymous) @ network-state-service.ts:40
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
zone.js:682 Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
at chunk-09ec7fc0.js:1476
at step (tslib.es6.js:99)
at Object.next (tslib.es6.js:80)
at fulfilled (tslib.es6.js:70)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601) TypeError: Cannot read property 'isProxied' of undefined
at http://localhost:8100/vendor.js:87541:27
at step (http://localhost:8100/vendor.js:112070:23)
at Object.next (http://localhost:8100/vendor.js:112051:53)
at fulfilled (http://localhost:8100/vendor.js:112041:58)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:8100/polyfills.js:2753:26)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:8100/polyfills.js:2512:43)
at http://localhost:8100/polyfills.js:3251:34
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:2785:31)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:8100/polyfills.js:2557:47)
at drainMicroTaskQueue (http://localhost:8100/polyfills.js:2963:35)
How can I use Network capacitor with Ionic 4? I can see the execution properly when I put a debug. But toast
is not working.
I have tried this. But it is not working.
Note: Actually Network Capacitor
is working fine. But it doesn't show the toast
. I have tested this on the browser as well as firebase hosting (i.e. https
)
service.ts
async WatchConnection() {
this.networkListener = Network.addListener('networkStatusChange', (status) => {
this.networkStatus = status;
if (!this.networkStatus.connected) {
this.showToastService.showNetworkStateErrorToast('Your internet seems to be down! Please check your network settings!');
} else {
setTimeout(() => {
this.showToastService.toast.dismiss();
if (this.networkStatus.connected) {
this.showToastService.showNetworkStateSuccessToast('Internet connection available!');
}
}, 3000);
}
});
this.networkStatus = await Network.getStatus();
}
app.component.ts
async initializeApp() {
this.networkStateService.WatchConnection();
}
I have found a hack until Ionic team will fix this issue.
Inside the toast service:
constructor(private toastCtrl: ToastController, ) {
this.toastCtrl.create({ animated: false }).then(t => { t.present(); t.dismiss(); });
}