Uncaught (in promise): inserted view was already destroyed?

Question

I am using the loader on the home page and showing it when I hitting the API for checking the user details and dismiss it when API respond to me. It's working fine when I entered correctly email and password. But when I filled incorrect email and password it works but next time when I entered correct or incorrect email id and password it shows me an error "Uncaught (in promise): inserted view was already destroyed". How to fix it. I already apply suggestion which is given in the following link Ionic - Error: Uncaught (in promise): removeView was not found. But it's not working for me. My code is given below

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController, AlertController, ToastController, ViewController, Events, LoadingController } from 'ionic-angular';
import { WelcomePage } from '../welcome/welcome';
import { PmsServiceProvider } from '../../providers/pms-service/pms-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public emailError: boolean = false;
  public passwordError: boolean = false;
  userForm: FormGroup;
  public loginStatus: boolean = true;
  public rememberChecked = true;
  Email;
  Password3;
  check;
  logined : boolean =false;
  checkStatus=1;

   toast = this.toastCtrl.create({
  message: 'Please enter correct email Id and password',
  duration: 3000,
  position: 'bottom'
})

public loading = this.loadingCtrl.create({
  content: 'Loading...',
  spinner: 'bubbles'
});

  constructor(public navCtrl: NavController, private form: FormBuilder, private alertCtrl: AlertController, private toastCtrl: ToastController, private service: PmsServiceProvider, public viewCtrl : ViewController, public events: Events,  public loadingCtrl: LoadingController) {
       console.log("in constructor");
       events.subscribe('user:created', (data)=>{
            this.Email=localStorage.getItem("email");
            this.Password3=localStorage.getItem("password");
       })
    this.userForm = form.group({
      email: [null, [Validators.required]],
      password: [null, [Validators.required]]
    })
  }    

  login(inputForm) {
       console.log(inputForm.value.email);
       console.log(inputForm.value.password);
    if (inputForm.value.email == null || inputForm.value.email == "") {
      this.emailError = true;
    } else {
      this.emailError = false;
    }

    if (inputForm.value.password == null || inputForm.value.password == "") {
      this.passwordError = true;
    } else {
      this.passwordError = false;
    }

    if (inputForm.value.email == null || inputForm.value.password == null || inputForm.value.email == "" || inputForm.value.password == "") {
         console.log("one is null");
      this.loginStatus = false;
    }
    else {
      this.loginStatus = true;
    }

    //CODE FOR TESTING THE EMAIL ID AND PASSWORD IS CORRECT 
    // Hit to the Api.
    if (this.loginStatus == true) {
           this.loading.present().then(()=>{
                this.service.checkUser(inputForm.value).subscribe(resData => {
                    //  console.log(resData.data.body);
                    console.log(resData);
                    if(this.loading){
                         this.loading.dismiss();
                         // this.loading =null;
                    }

                    //  console.log(resData.success);
                    //  console.log(resData.body[0]);
                  if (resData.success == true) {
                       if(this.rememberChecked ==true){
                            localStorage.setItem("email",inputForm.value.email);
                            localStorage.setItem("password",inputForm.value.password);
                            localStorage.setItem("user_id",resData.data.body[0].id);
                       }else{
                            localStorage.setItem("email","");
                            localStorage.setItem("password","");
                       }
                    // console.log(resData.respData[0].id);
                    localStorage.setItem("token",resData.data.mytoken);
                    console.log(resData.data.body[0].first_name);

                    this.navCtrl.push(WelcomePage, { id: resData.data.body[0].id, name : resData.data.body[0].first_name}).then(()=>{
                         const index = this.navCtrl.getActive().index;
                         this.navCtrl.remove(0,index);
                    });
                    // this.navCtrl.setRoot(WelcomePage);
                  }
                  else {
                    this.toast.present();;
                  }
                })
           });
     ;
    }
  }

}

Please help me out.

not sure if this is related to your error. But you cannot reuse a `loading` object. You need to create a new one everytime you have to present it.. — Suraj Rao, Jun 17 '17 at 06:31
looks like a duplicate of one of my older answers. https://stackoverflow.com/a/44172199/4826457 — Suraj Rao, Jun 17 '17 at 06:35
Possible duplicate of [AlertController Ionic 2 Uncaught (in promise): inserted view was already destroyed](https://stackoverflow.com/questions/44167908/alertcontroller-ionic-2-uncaught-in-promise-inserted-view-was-already-destroy) — Suraj Rao, Jun 17 '17 at 06:36
I add this let loading = this.loadingCtrl.create({ content: 'Loading...', spinner: 'bubbles' }); before loading.present(); but it is not working — Pulkit Aggarwal, Jun 17 '17 at 06:40
yeah.. in that case `loading` will be local variable you wont be using `this` to access it.. working? — Suraj Rao, Jun 17 '17 at 06:41
I think this is the issue `const index = this.navCtrl.getActive().index; this.navCtrl.remove(0,index);` not sure though what you are attempting — Suraj Rao, Jun 17 '17 at 06:46
this is logic for getting the index of index of the current page and remove the 0 index page and that's how it become the root page — Pulkit Aggarwal, Jun 17 '17 at 06:52
I know this but I also implement some other logic that's why I do this. — Pulkit Aggarwal, Jun 17 '17 at 06:54
I suggest commenting out the two lines and trying.. If it works you may have to reconsider your logic — Suraj Rao, Jun 17 '17 at 06:55

score 2 · Answer 1 · answered Dec 01 '18 at 08:02

You need to create new object for LoadingController every time when you need. public loading: any

constructor(private loadingCtrl: LoadingController){}

presentLoadingDefault() {
    this.loading= this.loadingCtrl.create({
      content: 'Please wait...'
    })

    this.loading.present()
}

You should call this method when you want to show loader or spinner

Uncaught (in promise): inserted view was already destroyed?

1 Answers1