AlertController/Ionic 4 Beta 7 - Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

I’m finally building an app with Ionic and I decided to start with Ionic 4.

I have put a reset button on and then used the docs to get the snippet below:

  async buttonCancel() {
    const alert = await this.alertCtrl.create({
      header: 'Reset',
      message: 'Do you want to reset back to the homepage?',
      buttons: [
        { 
          text: 'No',
          role: 'cancel',
          cssClass: 'secondary'
        }, {
          text: 'Yes',
          handler: () => {
            this.myDataService.resetOffers();
            this.navCtrl.navigateForward("/");
          }
        }
      ]
    });

    await alert.present();
  }

My code is in the handler, which is causing the following warning to appear in the console:

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

This seems like a bug but I just wanted to check before I submitted it in GitHub. Am I doing something wrong?

My ionic info is:

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

I have the same problem on ionic v4 and the beta 8 continues with the same error.

Any solution?

Are you using lazy loading? My understanding is that Angular’s router must be used if you are.

No this is the only place I have asked about it so far, no solution found, although the code does still run, it’s only a warning.

I’m not sure to be honest, this is my first Ionic app.

I’m not explicitly using lazy loading but I dont know what the defaults are under the hood.

My understanding is that an ionic 4.x app used angular routing out of the box and not the traditional ionic navigation where the nav controller is used. I believe that the nav controller can be used if lazy loading is not as well in apps where ionic is not used as the framework.

Have you try beta.12?

Have you try to add the missing await?

 await this.navCtrl.navigateForward("/");

Have you try to use zone?

 this.zone.run(async () => 
   await this.navCtrl.navigateForward("/");
 });

With the beta 12 version and the “this.zone.run()” works perfectly.
Thank you very much!!

My “ionic info”:

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/home/user/.nvm/versions/node/v10.10.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.8.4
   @angular-devkit/schematics : 0.8.4
   @angular/cli               : 6.2.4
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   Android SDK Tools : 26.1.1 (/home/user/Android/Sdk)
   NodeJS            : v10.10.0 (/home/user/.nvm/versions/node/v10.10.0/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.15

Code that has worked for me:

import { Injectable, NgZone } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Injectable()
export class AlertDemo {

constructor(
    private alertCtrl: AlertController,
    private zone: NgZone
  ) {
  }

async buttonClick() {
    const alert = await this.alertCtrl.create({
      header: 'Test',
      message: 'Message test',
      backdropDismiss: false
      buttons: [
        {
          text: 'Ok',
          handler: () => {
              this.zone.run(async () => {
                await this.navCtrl.navigateForward("/");
              });
          }
        }
      ]
    });

    await alert.present();
  }

}
2 Likes

Cool :+1:

I didn’t have identified yet the pattern where zone is needed, most of the time it isn’t needed but sometimes it happens

Anyhow cool

1 Like

@reedrichards you nailed it, I marked the other one as a solution as it gave a clear snippet to use.

Not sure if there is a points system on this board but if so, sorry :slight_smile:

I would also point out to future readers that this the zone to be added to the import and the constructor as the snippet clearly shows but I missed and spent another 5 minutes googling “why doesn’t zone exist” before concluding that I must update to the latest beta and then realising I was just blind and dumb for a second.

It seems to solve other issues as well as I had a delete function with a confirm alert and on the ok it would delete that item from the data but the ui wasn’t being refreshed so it was still in the list of cards. I did some research and actually didn’t expect this to work as the Angular docs say zone is for when you update the data that you don’t want Angular to monitor and update, but I wanted the opposite. It worked anyway.

Hopefully the docs will have some clearer usage examples and explanation of what / why zone is required by the time it comes out of beta :slight_smile:

1 Like

I opened an issue to run this past the devs to see if its something that needs dealing with or documenting or neither.

Here is the link if you’re curious:

1 Like

FYI everyone: The github issue has been closed as fixed.

I have just removed the ngzone wrapper on an app running Ionic4.RC3 and I’m not seeing the error in the console any more so it seems that it is resolved.