Update:
After updating to the latest version of Ionic 4.6.2, I encountered the following exception while in 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...
To utilize Network capacitor with Ionic 4, I have ensured proper execution when debugging. However, the toast function is not functioning as expected.
I attempted a solution without success.
Note: The Network Capacitor functionality works correctly but does not display the toast. Testing was conducted both on a browser and Firebase hosting with 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();
}