[Beta 11] Overlays problems

Ionic Framework ionic-v3
1

Hi,
I have troubles with the new overlays in beta 11.
I found out that now (it working fine with beta 10) trying to fire an alert while a toast is showeb crash the app (but I suspect that the same error would happen with other overlays) with this error :

6     846331   group    EXCEPTION: Error in ./AppRoot class AppRoot_Host - inlin
e template:0:0
7     846334   error    EXCEPTION: Error in ./AppRoot class AppRoot_Host - inlin
e template:0:0
8     846336   error    ORIGINAL EXCEPTION: Expression has changed after it was
checked. Previous value: 'false'. Current value: 'true'
9     846339   error    ORIGINAL STACKTRACE:
10    846341   error    BaseException@http://localhost:8100/build/js/app.bundle.
js:3741:23
ExpressionChangedAfterItHasBeenCheckedException@http://localhost:8100/build/js/a
pp.bundle.js:33094:9
checkBinding@http://localhost:8100/build/js/app.bundle.js:34247:19
anonymous/_View_AppRoot_Host0.prototype.detectChangesInternal@AppRoot.template.j
s:31:7
[230]</AppView</AppView.prototype.detectChanges@http://localhost:8100/build/js/a
pp.bundle.js:33623:9
[230]</DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:8100/
build/js/app.bundle.js:33728:13
[232]</ViewRef_</ViewRef_.prototype.checkNoChanges@http://localhost:8100/build/j
s/app.bundle.js:34081:55
[182]</ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:8100/b
uild/js/app.bundle.js:27568:79
Call@http://localhost:8100/build/js/es6-shim.min.js:10:4652
forEach@http://localhost:8100/build/js/es6-shim.min.js:10:19622
[182]</ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:8100/bui
ld/js/app.bundle.js:27568:17
ApplicationRef_/</<@http://localhost:8100/build/js/app.bundle.js:27470:119
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:8100/build/js
/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:8100/build/js/app.bundle.js:391
22:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:8100/build/js
/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:8100/build/js/zone.js:216:25
[257]</NgZoneImpl</NgZoneImpl.prototype.runInner@http://localhost:8100/build/js/
app.bundle.js:39153:60
[256]</NgZone</NgZone.prototype.run@http://localhost:8100/build/js/app.bundle.js
:39046:51
ApplicationRef_/<@http://localhost:8100/build/js/app.bundle.js:27470:89
[33]</EventEmitter</EventEmitter.prototype.subscribe/schedulerFn<@http://localho
st:8100/build/js/app.bundle.js:3110:54
[595]</SafeSubscriber</SafeSubscriber.prototype.__tryOrUnsub@http://localhost:81
00/build/js/app.bundle.js:96543:13
[595]</SafeSubscriber</SafeSubscriber.prototype.next@http://localhost:8100/build
/js/app.bundle.js:96492:17
[595]</Subscriber</Subscriber.prototype._next@http://localhost:8100/build/js/app
.bundle.js:96442:9
[595]</Subscriber</Subscriber.prototype.next@http://localhost:8100/build/js/app.
bundle.js:96406:13
[593]</Subject</Subject.prototype._finalNext@http://localhost:8100/build/js/app.
bundle.js:96198:13
[593]</Subject</Subject.prototype._next@http://localhost:8100/build/js/app.bundl
e.js:96190:13
[593]</Subject</Subject.prototype.next@http://localhost:8100/build/js/app.bundle
.js:96147:9
[33]</EventEmitter</EventEmitter.prototype.emit@http://localhost:8100/build/js/a
pp.bundle.js:3098:54
[256]</NgZone</NgZone.prototype._checkStable@http://localhost:8100/build/js/app.
bundle.js:38956:21
NgZone/this._zoneImpl<.setMicrotask@http://localhost:8100/build/js/app.bundle.js
:38932:17
NgZoneImpl/this.inner<.onHasTask@http://localhost:8100/build/js/app.bundle.js:39
134:29
Zone</ZoneDelegate</ZoneDelegate.prototype.hasTask@http://localhost:8100/build/j
s/zone.js:382:40
Zone</ZoneDelegate</ZoneDelegate.prototype._updateTaskCount@http://localhost:810
0/build/js/zone.js:399:22
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:8100/buil
d/js/zone.js:360:22
Zone</Zone</Zone.prototype.runTask@http://localhost:8100/build/js/zone.js:256:29

drainMicroTaskQueue@http://localhost:8100/build/js/zone.js:474:26
ZoneTask/this.invoke@http://localhost:8100/build/js/zone.js:426:22

11    846343   error    ERROR CONTEXT:
12    846345   groupEnd
2

Try enabling production mode in app.ts

import { enableProdMode } from '@angular/core';
enableProdMode();

For details see

3

Thanks@vishal5308 for your answer but enableProdMode did not solve the problem.

4

I have the same problem: when an alert is presented while a toast is still open, the app crashes with:

7 816510 error ERROR CONTEXT:
3 816508 error EXCEPTION: Error in ./AppRoot class AppRoot_Host - inline template:0:0
4 816509 error ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: ‘false’. Current value: ‘true’
5 816509 error ORIGINAL STACKTRACE:
6 816509 error Error: Expression has changed after it was checked. Previous value: ‘false’. Current value: ‘true’
at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:1761:23)
at new ExpressionChangedAfterItHasBeenCheckedException (http://localhost:8100/build/js/app.bundle.js:31114:16)
at checkBinding (http://localhost:8100/build/js/app.bundle.js:32267:19)
at DebugAppView.View_AppRoot_Host0.detectChangesInternal (AppRoot.template.js:33:7)
at DebugAppView.AppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:31643:14)
at DebugAppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:31748:44)
at ViewRef.checkNoChanges (http://localhost:8100/build/js/app.bundle.js:32101:66)
at http://localhost:8100/build/js/app.bundle.js:25588:88
at Array.forEach (native)
at ApplicationRef_.tick (http://localhost:8100/build/js/app.bundle.js:25588:42)

The code I’m using is the blank starter template with this:

home.ts:

import {Component} from '@angular/core';
import {NavController, AlertController, ToastController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public toastCtrl: ToastController) {

  }
  
  doAlert() {
    let alert = this.alertCtrl.create({
      title: 'Alert'
    });
    alert.present();
  }
  
  doToast() {
    let toast = this.toastCtrl.create({
      message: 'Toast'
    });
    toast.present();
  }
  
}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (tap)="doToast()">
    Toast
  </button>
  
  <button (tap)="doAlert()">
    Alert
  </button>
</ion-content>

To reproduce, press the toast button and then the alert button.

ionic info:

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
OS:
Node Version: v5.11.0

Any help is appreciated…

1 Like
5

I think it’s a beta 11 bug :

3 Likes
6

yeh I am having a similar issue whilst using LoadingController and AlertController together. For now I have just removed LoadingController so that my AlertController is responsive, otherwise the user gets stuck in the app (can’t click off the alert box)