Runtime Error Uncaught (in promise): removeView was not found

Question

I am calling two api call in single page. but if i use one api call its working fine. But if i use two api call in same page. I'm getting below error at Runtime.

Error Uncaught (in promise): removeView was not found`.

And i have one doubt too. Where ever i go to any screens. If i want to come back to my home screen. I need to show the Api called Data to display always. So should i need to call my Api call method inside constructor or ionViewDidEnter. i did in ionViewDidEnter i don't things show this may be the causes for my error.

Here is my code :

import { Component, ViewChild } from '@angular/core';
import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, ToastController, LoadingController, Refresher } from 'ionic-angular';
import { CategoryDetailPage } from '../categorydetail/categorydetail';
import { ConferenceData } from '../../providers/conference-data';
import { UserData } from '../../providers/user-data';
import { SessionDetailPage } from '../session-detail/session-detail';
import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../../providers/AuthService';

@Component({
  selector: 'page-speaker-list',
  templateUrl: 'speaker-list.html'
})

export class SpeakerListPage {
   loading: any;
   data: any;
   Catdata: any;
   Catdatanames: any;
   resdata: any;
   resCatdata: any;
   resCatdatanames: any;
   loginData: {username?: string} = {};
   resloginData: {username?: string} = {};

  constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController,
    public toastCtrl: ToastController,
    public confData: ConferenceData,
    public user: UserData,
    public http:Http,
    public authService: AuthService) { }

  ionViewDidEnter() {
   this.show();
   this.another();
  }

  show() {
    this.showLoader();
      this.authService.subs(this.loginData).then((result) => {
      this.loading.dismiss();
      this.data = result;

       if(this.data.status == 1)
       {
           this.Catdata = this.data.SubjectList;
           for(let i=0; i<this.Catdata.length; i++) {
               console.log(this.Catdata[i].SubjectName);
           }
       }
       else if(this.data.status == 0) {
          let alert = this.alertCtrl.create({
              title: 'Error',
              subTitle: 'Please Enter Valid Username & Password',
              buttons: ['OK']
          });
          alert.present();
       }
    }, (err) => {
      this.loading.dismiss();
    });
}

another() {
  this.showLoader();
    this.authService.allresources(this.resloginData).then((result) => {
      this.loading.dismiss();
      this.resdata = result;

      if(this.resdata.status == 1)
      {
           this.resCatdata = this.resdata.SubjectList;
           for(let i=0; i<this.resCatdata.length; i++) {
               console.log(this.resCatdata[i].FileName);
           }
      }
      else if(this.resdata.status == 0) {
         let alert = this.alertCtrl.create({
            title: 'Error',
            subTitle: 'Please Enter Valid Username & Password',
            buttons: ['OK']
         });
         alert.present();
       }
    }, (err) => {
      this.loading.dismiss();
    });
}

showLoader(){
    this.loading = this.loadingCtrl.create({
        content: 'Authenticating...'
    });
    this.loading.present();
  }
}

Please help me out. How can solve my issue?

My ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.5
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Help will be much useful.Thanks

Answer 1

I had the same error which was caused by accidentally having two handlers firing. One was part of the form as an ngSubmit attribute, the other one was on a custom save button. Removing one of the two solved it.

Answer 2

Cause of issue: There are multiple calls to dismiss method of loading component.

Solution: While creating the loader, check if the loader instance is not already present, only then create another instance.

Similarly, while dismissing the loader, check if the loader instance does exists, only then dismiss it.

Code:

constructor(private _loadingCtrl: LoadingController){}

loading;

showLoading() {
    if(!this.loading){
        this.loading = this._loadingCtrl.create({
            content: 'Please Wait...'
        });
        this.loading.present();
    }
}

dismissLoading(){
    if(this.loading){
        this.loading.dismiss();
        this.loading = null;
    }
}

Answer 3

I solved the following by using this method.

this.loading.dismissAll();

Answer 4

I know this question asked more than a month ago!

I was going through the same scenario with same problem and i sorted out this issue.

And i have posted the answer in another stackoverflow Question.

Some of the discussion and reference available to get know the issue.

Note: If you call this.loading.dismiss() manually, I don't recommend to use dismissOnPageChange, you are probably dismissing the same loading twice.

I think this.loading.present() is asynchronous method., So we can't call this.loading.dismiss() manually when this.loading.present() is still running.

So if we need to dismiss manually we need to make sure that loading is presented and have a view to dismiss it, we should use other method after present().then like my code in below.

    public searchClick() {
       this.createLoader();
       this.loading.present().then(() => {
       this.searchService.submitRequest(params, data)
            .subscribe(response => {
                this.loading.dismiss(); // Dismissing the loader manually.
                //Call the other function
                //You can dismiss loader here 
                //You can dismiss loader in other functions too by calling it from here, Since the scope will be available to that also.
            }, error => {
              this.loading.dismiss();
              this.errorMessage = <any>error
            });
      });
   }

   createLoader(message: string = "Please wait...") { // Optional Parameter
      this.loading = this.loadingCtrl.create({
        content: message
   });
 }

I hope this helps you out/gives you idea about your problem, if you still have the issue.

Ionic Framework LoadingController Documentation for this.