Toast or Alert Controllers throw an error when user is offline

Bug Report

Ionic version:

[x] 4.0

Current behavior:

Toast or Alert controllers cannot be used when there is not connectivity. I want to display a toast message when the user goes offline:

public async showOffline() {

const toast: any = await this.toastCtrl.create({
  message: "You are OFFLINE",
  duration: 5000
});
await toast.present();

}

This works fine online but as soon as I got offline I get an error. This happens in the browser.

Expected behavior:

Toast message is displayed in the browser.

Steps to reproduce:

Create a method to display toast: public async showOffline() {

const toast: any = await this.toastCtrl.create({
  message: "You are OFFLINE",
  duration: 5000
});
await toast.present();

}

Detect when user is offline:

this.connectionService.monitor().subscribe(isConnected => { this.log.debug(“isConnected”, isConnected); if (!isConnected) { this.alertService.showOffline(); this.online = false; } else { this.online = true; } }); I’m using this package: ng-connection-service

Related code:

this.connectionService.monitor().subscribe(isConnected => { this.log.debug(“isConnected”, isConnected); if (!isConnected) { this.alertService.showOffline(); this.online = false; } else { this.online = true; } });

…

public async showOffline() {

const toast: any = await this.toastCtrl.create({
  message: "You are OFFLINE",
  duration: 5000
});
await toast.present();

}

Other information:

Stack trace:

13:27:55,919 EMPOWER isConnected [false] bootstrap:145 GET http://localhost:8100/0.js net::ERR_INTERNET_DISCONNECTED requireEnsure @ bootstrap:145 webpackAsyncContext @ ..entry.js$ include: .entry.js$ namespace object:810 o @ ionic.core.js:6 t.s @ ionic.core.js:9 lt @ ionic.core.js:9 (anonymous) @ ionic.core.js:9 v @ ionic.core.js:9 (anonymous) @ ionic.core.js:9 push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:17289 push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 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 onInvokeTask @ core.js:17280 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 drainMicroTaskQueue @ zone.js:601 push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502 invokeTask @ zone.js:1744 globalZoneAwareCallback @ zone.js:1770 bootstrap:145 GET http://localhost:8100/158.js net::ERR_INTERNET_DISCONNECTED requireEnsure @ bootstrap:145 webpackAsyncContext @ ..entry.js$ include: .entry.js$ namespace object:810 o @ ionic.core.js:6 t.s @ ionic.core.js:9 lt @ ionic.core.js:9 (anonymous) @ ionic.core.js:9 v @ ionic.core.js:9 (anonymous) @ ionic.core.js:9 push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:17289 push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 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 onInvokeTask @ core.js:17280 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 drainMicroTaskQueue @ zone.js:601 push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502 invokeTask @ zone.js:1744 globalZoneAwareCallback @ zone.js:1770 core.js:15714 ERROR Error: Uncaught (in promise): Error: Loading chunk 0 failed. (error: http://localhost:8100/0.js) Error: Loading chunk 0 failed. (error: http://localhost:8100/0.js) at HTMLScriptElement.onScriptComplete (bootstrap:133) at HTMLScriptElement.wrapFn (zone.js:1332) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17280) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498) at invokeTask (zone.js:1744) at HTMLScriptElement.globalZoneAwareCallback (zone.js:1770) at HTMLScriptElement.onScriptComplete (bootstrap:133) at HTMLScriptElement.wrapFn (zone.js:1332) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17280) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498) at invokeTask (zone.js:1744) at HTMLScriptElement.globalZoneAwareCallback (zone.js:1770) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17280) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601) at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) at invokeTask (zone.js:1744)

Ionic info:

Ionic:

ionic (Ionic CLI) : 4.10.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.0.0 @angular-devkit/build-angular : 0.12.4 @angular-devkit/schematics : 7.2.4 @angular/cli : 7.2.4 @ionic/angular-toolkit : 1.3.0

System:

NodeJS : v8.11.4 (/usr/bin/node) npm : 6.7.0 OS : Linux 4.19

[oori]

In your controller’s constructor, add:

  constructor(public toastController: ToastController) {
    // HACK: fix toast not presented when offline, due to lazy loading the toast controller.
    // Can be removed once #17450 is resolved: https://github.com/ionic-team/ionic/issues/17450
    this.toastController.create({ animated: false }).then(t => { t.present(); t.dismiss(); });
  }

present() -> dismiss() is faster than duration: 1, and with no animated, it’s not visible at all… @raparri01 create() alone is not enough, still one chunk missing.

[pvandrunen]

@jasonruesch my work around was to have toast show a message when the app starts up. That way the toastController is loaded. When I go offline it loads properly no problem.