EXCEPTION: Attempt to use a destroyed view: detectChanges

Ionic Framework ionic-v3
1

I am noticing a strange error in my app. It’s related to dismissing modals. I use this.nav.setRoot(page) to separate different sections of my app. One way to guarantee that this error happens is this:

  1. Load the app already logged in so it loads HomePage via setRoot.
  2. the user logs out, which causes a setRoot for WelcomePage.
  3. user clicks a button to open a modal on the welcome page. ( let modal = this.modalController.create(...); modal.present() )
  4. within the modal, the user clicks a button to close the modal. ( this.viewCtrl.dismiss(); )
  5. EXCEPTION: Attempt to use a destroyed view: detectChanges

Anybody else seeing this exception in their app? The steps above are the only way I can dupe it every time, but I know it happens in other places too.

2

@jasonwaters Yess. You are right.

I’m also facing the same issue with Loading component.

If I’ve more than one Loading Component in my page.

The first one Loading is working properly but after that remaining Loading not working.
They show Attempt to use a destroyed view: detectChanges error in console.

Have anyone find solution for this.

Thanks in advance.

1 Like
3

Hi.
I had the same (detectChanges error)
Solves using two loading

getAll() {
    let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    loading.present();

    this.dataProvider.getData().subscribe(
        data => {
          this.listData = data; 
          loading.dismiss()
        },  
        error =>  this.errorMessage = <any>error
    );
}


presentModal() {
    let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    let modal = this.modalCtrl.create(ModalPage);
    
    modal.present();  
    
    modal.onDidDismiss(data => {

        loading.present();

        this.dataProvider.addData(data).subscribe(
            data  => {
                this.listData.unshift(data);
                loading.dismiss()
            },
            error =>  this.errorMessage = <any>error
        );
    });
}