ionic-framework: Ionic v3 - Runtime Error Uncaught (in promise): removeView was not found

Ionic version: (check one with “x”) [ x] 3.x

I’m submitting a … (check one with “x”) [x ] bug report

Current behavior:

Having a signup form with 2 fields email and password, the user is created successfully but ends up in this exception.

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

Expected behavior:

Code works with v2 no error when this codebase is upgraded to v3 package.json it throws error in promise.

Related code:

signupUser(){
    if (!this.signupForm.valid){
      console.log(this.signupForm.value);
    } else {
      this.authData.signupUser(this.signupForm.value.email, this.signupForm.value.password)
      .then(() => {
        this.nav.setRoot(HomePage);
      }, (error) => {
        this.loading.dismiss().then( () => {
          var errorMessage: string = error.message;
            let alert = this.alertCtrl.create({
              message: errorMessage,
              buttons: [
                {
                  text: "Ok",
                  role: 'cancel'
                }
              ]
            });
          alert.present();
        });
      });

      this.loading = this.loadingCtrl.create({
        dismissOnPageChange: true,
      });
      this.loading.present();
    }
  }

Other information:


Stack trace
Error: Uncaught (in promise): removeView was not found
    at d (http://localhost:8101/build/polyfills.js:3:3991)
    at l (http://localhost:8101/build/polyfills.js:3:3244)
    at l (http://localhost:8101/build/polyfills.js:3:2930)
    at http://localhost:8101/build/polyfills.js:3:3758
    at t.invokeTask (http://localhost:8101/build/polyfills.js:3:12256)
    at Object.onInvokeTask (http://localhost:8101/build/main.js:4394:37)
    at t.invokeTask (http://localhost:8101/build/polyfills.js:3:12177)
    at n.runTask (http://localhost:8101/build/polyfills.js:3:7153)
    at a (http://localhost:8101/build/polyfills.js:3:2312)
    at <anonymous>
package.json contains

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^2.0.0-beta.8",
    "firebase": "^3.9.0",
    "ionic-angular": "3.1.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.4",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "An Ionic project"
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework: 3.1.0
Ionic App Scripts: 1.3.4
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 39
  • Comments: 31 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

Hi guys, I had the same issue but the problem was because return false; was missing from alert handler. I had this prior version 3.1.1

let alert = this.alertCtrl.create({
            message: "message....",
            buttons: [
              {
                text: "Cancel", handler: () => {
                  alert.dismiss();
                }
              },
              {
                text: "Sign up instead?", handler: () => {
                  alert.dismiss().then(() => {
                    self.nav.pop().then(data => {
                      self.nav.push(OtherPage);
                    });
                  });
                }
              }]
          });
          alert.present();

after upgrading to 3.1.1, I had to put the return false; to the handlers

let alert = this.alertCtrl.create({
            message: "message....",
            buttons: [
              {
                text: "Cancel", handler: () => {
                  alert.dismiss(); 
                  return false;
                }
              },
              {
                text: "Sign up instead?", handler: () => {
                  alert.dismiss().then(() => {
                    self.nav.pop().then(data => {
                      self.nav.push(OtherPage);
                    });
                  });
                  return false;
                }
              }]
          });
          alert.present();

The documentation says that http://ionicframework.com/docs/api/components/alert/AlertController/

I hope someone gets to the bottom of this, because it is annoying and the error occurs pretty much at random. For me it happens whenever I am changing tabs rapidly. My best diagnosis is that it is very likely to be a race condition.

My solution is to add a catch after dismiss:

  this.loading.dismiss().catch()

seems to work so far.

update, I’ve found the way to fix this issue. (not downgrade framework version, I still use 3.1.0) I have fixed this issue by change my code about loading like below and it works for me.

loading.present();
somePromiseMethod().then(()=>{
     loading.dismiss();
});
...

to

loading.present().then(()=>{
   somePromiseMethod().then(()=>{
      loading.dismiss();
   });
});

Why it works? I think because loading.present() is asynchronous method., So we can’t call loading.dismiss() manually when 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 above.

However I’m not sure why we doesn’t have this problem in the old framework version (2.0.3).

A quick fix would be to make the loader null. if(this.loader){ this.loader.dismiss(); this.loader = null; }

That should fix the issue.

I solved the following by using this method. this.loading.dismissAll();

@kaceo method was still throwing the error till i did this

loader.dismiss().catch(()=>{})

mentioned here https://github.com/ionic-team/ionic/issues/11776#issuecomment-314050068

The problem is mostly due to the => this.nav.setRoot(HomePage); I think that there is problem when he want to pop the component.

One “temporary” solution to this problem is to remplace this.nav.setRoot(HomePage) by :

this.nav.insert(0,HomePage); this.nav.popToRoot();

You are setting the Homepage to the root by doing that, and then you just pop all the others component.

If there is a problem, tell me

Sorry. My original comment was incorrect, so I deleted it. Mine was not related to the alert but to a subsequent loading instance, and an attempt to remove it on ngAfterContentChecked.

The current methods I’ve written do still cause this problem:

    public showLoading(message) {
        this.loadingObject = this.loading.create({content: message, dismissOnPageChange: false});
        this.loadingObject.present();
        return this.loadingObject;
    }

    public dismissLoading() {
        if (this.loadingObject) {
            try {
                this.loadingObject.dismiss();
            }
            catch (exception) {

            }
            this.loadingObject = null;
        }
    }

These are provided in a service. I’m not sure what could be wrong here. It definitely was not a problem until moving from ionic 2 to ionic 3. It definitely has nothing to do with page navigation.

Could you try to revise your code by add .then() after loading.present(), it works for me. ^ fixes issue, thanks.

This is a crazy issue marked as “support” by Ionic team!

The LoadingController itself should have a simple f*cking if on dismiss() to avoid this problem.

Due to this issue, we need to maintain a LoadingProvider. This problem is annoying.

I had the same problem… until I recognized that binding (click)=“callback()” on nested dom elements was causing this problem!

Example - content of modal dialog:

<ion-item detail-none *virtualItem="let unsentOffer" (click)="selectOffer(unsentOffer)">
      <ion-grid no-padding>
        <ion-row>
          <ion-col>
            <div class="project-name ellipsis line-count-1" (click)="selectOffer(unsentOffer)"><span ion-text text-bold>{{unsentOffer.description}}</span>
            </div>
            <div class="customer-name ellipsis line-count-1"><span ion-text>{{unsentOffer.firstNameLastName}}</span>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
</ion-item>

If you dismiss your dialog in selectOffer() - it is called twice - the second one crashes with “removeView was not found”…

Hello all! As this seems like more of a support question at this point I will urge that you ask that you take this question to our forum or our [slack channel](https://ionicworldwide.herokuapp.com/]. Thanks for using Ionic!

@EduardoIbarra, @theo4u’s solution worked

this

this.loading.present().then( x=> { this.dataProvider.getData("assets/data/persons.json").subscribe((data: Array<Object>) => { this.fullPersonsList = data; this.filteredPersonsList = data; this.loading.dismiss().catch(() =>{}); }); });

Worked for me

so the full code should be if(loading){ loading.dismiss(); loading = undefined }

Had the same error popping up. “removeView was not found”

Here’s my case and how I solved it: The problem was that my loader always showed only for the first time it got called. The second time I had to display it, the error popped up and the app crashed.

I was instantiating my loader in the constructor like this…


public loading: Loading;
constructor(...){
    this.loading = this.loadingCtrl.create({ });
    
}

I removed the error by always calling this.loading = this.loadingCtrl.create({ }); everytime before presenting the loader instead of only once in the constructor.

Not sure if this is the best approach, but I’m picking it for now. Hope it also helps some of you.

I found same problem and tested with this.

  1. I have commented the block code for Loader handler --> The error dismiss and Now working well…
  2. I went back to my original code and then i have added a timeOut --> Now working well.

I have added this code

setTimeout(()=>{
  // Here Code
})

Work for me!

i’ve tried those tips but still, the issue is still showing. I kind of agree with @kaceo that this is race condition, so I added a timeout and it works. So far I haven’t seen the error showing up again.

Example:

setTimeout(() => {
        this.getData().subscribe(res => {
          this.loader.dismiss();
          this.items = res.docs;
        }, err => {
          this.loader.dismiss();
          console.log(err);
        });
      }, 100);

Try this : this.loader.dismiss(); setTimeout(() => { this.nav.setRoot(‘Home’); });

Its working for me 😃

Hi xap5xap, Could you try to remove alert.dismiss(), it works for me. So your code will be like this.

text: "Sign up instead?", handler: () => {
      self.nav.pop().then(data => {
            self.nav.push(OtherPage);
       });
}

Hi uzumakinaruto123, Could you try to revise your code by add .then() after loading.present(), it works for me. So your code will be like this.

this.loading.present().then(()=>{
     return this.http.get(this.baseUrl + 'articles.php')
     ...(your code)
});