EXCEPTION: Attempt to use a dehydrated detector

Ionic Framework ionic-v3
1

Hi

I’ve got some exception like this

EXCEPTION: Attempt to use a dehydrated detector: AuthPage_1 -> blur

Its happen when we use Loading before change rootPage, and in rootPage intially also make Loading

User click button > Loading > Loading.dismiss() >  nav.setRoot(OtherPage) > OtherPage.onPageLoaded() > Loading > Loading.dismiss() > complete

Any idea? Thanks

UPDATE

I can confirm this exception occur when change rootPage from Observale > Subscribe

this.auth.login(credentials)
            .subscribe(data => {
                loading.dismiss();

                console.log('auth success');

                this.nav.setRoot(DashboardPage);
            }, error => {
                loading.dismiss();

                console.log('auth error');
            }, () => {
                console.log('auth complete');
            })

If i remove loading part then everything is perfect …

2

I’ve had this problem a few times, and never a case was the same as another, so I do not know exactly how to solve for all. But every time I had the problem was due to the element no longer exists on the page, so sometimes change a * ngIf to [hidden], or put a setTimeout resolved.

3

I’ve try with setTimeout, but still persist, its really strange, but its occur only on first time load :frowning:

4

+1
I have SAME 5 inputs and one of them doesn’t work )

I replaced ([ngModel]) to [value] and it works.
After this I replaced [value] to ([ngModel]) and it works too
Magic :slight_smile:

5

I found my problem. Used trackBy without unique key.

6

It my case, it only happens when I use nav.setRoot instead of nav.push

Failing code:

  onLogin(form) {
    if (form.valid) {
      this.menu.open();
      this.submitted = true;
      this.nav.setRoot(CreatePage); // fails
    }
  }

Working code:

  onLogin(form) {
    if (form.valid) {
      this.menu.open();
      this.submitted = true;
      this.nav.push(CreatePage);  // works
    }
  }

How to solve this issue or create a workaround? I am not so skilled yet to understand what is going on behind the cameras.

7

Try do the blur (unfocus) from all input elements. It must fix this issue.
So this problem:
Your form focused on any input. After blur, angular 2 runs the validation. When you use setRoot then you less focus => blur and then angular runs the validation but your form already isn’t exist. Pam pam! Error. IMO.