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

[ghost]

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

[manucorporat]

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

[KevinKeo]

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

[cmorbitzer]

I got this error too--however, downgrading ion-app-scripts from 1.3.6 to 1.3.4 fixed it for me. I see you're using 1.3.4, so not sure what's up.

Ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.0-201704300143
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1 
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.2 Build version 8E2002

[4UForever]

I have found this problem too after I update framework from v2.0.3 to 3.0.0 and update again to v3.1.0, But I'm not get this error in framework v2.0.3. so not sure this problem found on 3.0.0 or 3.1.0
Maybe I need to downgrade for fix this issue.

now my ionic info is below.

Cordova CLI: 6.4.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.2 Build version 8E2002

Note: my ionic app script version 1.3.4 too.

[4UForever]

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).

[xap5xap]

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/

[uzumakinaruto123]

Same issue here! I don't think I am dismissing loading twice. If I don't present this loading I don't get the error.

getPosts() {
        if(this.loading != undefined){
            this.loading.dismiss();
        }
        
        this.loading = this.loadingCtrl.create({
            spinner: 'bubbles',
            content: 'Please wait...'
        });

        this.loading.present();
        return this.http.get(this.baseUrl + 'articles.php')
            .toPromise().then((result: Response) => {
                const data = result.json();
                this.articleRepo = data;
                if (this.items == undefined) {
                    this.updateItems(10, 0).then((err) => {
                        this.loading.dismiss();
                    });
                }else{
                    this.loading.dismiss();
                }
                return data;
            }).catch((err) => {
                this.loading.dismiss();
            });
    }

Your system information:

 ordova CLI: 6.3.1
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.1
Xcode version: Not installed

[4UForever]

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)
});

[drptbl]

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

[jgw96]

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!

[adrianalw]

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

That should fix the issue.

[Yacobus]

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

Its working for me :)

[queejie]

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.

[pkracht]

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"...

[jhonatasfender]

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

[shizhenbin]

I have solved this problem by callback function, see:
this.viewCtrl.dismiss().then(()=>{
this.events.publish("goto",TabsPage,null,{root:true});
});

make a try by callback function

[Ross-Rawlins]

I am getting this issue when you open an actionsheet or modal multiple times in quick succession. And they are opened from different sources. How can you apply the fix to that especially when ioni handles the view killing like on the action sheet.

[andela-andrewmakenzi]

On the original issue, and other issues similar. Read this

Above is the code for the loadController. Notice the code that tries to access the page you are moving from to do the animations. This happens on different components and usually, depends on where on the page you set the component to display.

This is the code that fails

The code fails on the last part, trying to dismiss the loadController why?

Because you reset the navigation stack by calling setRoot() and you no longer have access to the signup page. The only page in the nav stack is the homepage. This is the page from which animations should happen

Try setting the dismiss time to about 1000ms. This should give it enough time to rewrite the correct leaving page on the navigation stack to the homepage and leave gracefully

[kaceo]

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.

[tomysmile]

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);

[wilfredonoyola]

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!

[k00na]

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.

[iget-master]

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.

[viveksinha9]

I get this issue in my PWA, whenever I press browser back button. NavBar back button is working fine.
I am using loading controller as:
loading.present().then(()=>{ //code to retrieve data; loading.dismiss(); });

[brianmak3]

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

[theoomoregbee]

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

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

mentioned here #11776 (comment)

[puneetratan]

just try

`
import { App} from 'ionic-angular';
export class PopoverPage {
constructor(public navCtrl: NavController,public appCtrl: App) {}

this.viewCtrl.dismiss().then(()=>{
setTimeout(()=>{
confirm.dismiss().then(()=>{
this.appCtrl.getRootNav().setRoot('DashboardPage');
})
},300)
})
}
`

[Velmir]

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

[EduardoIbarra]

This is just ridiculous. I tried every solution listed here with no success. In my case, I was presenting my login page as a modal. So my solution for closing it while keeping my sidebar functionality was:
window.location.reload();
So lame...

[erperejildo]

@EduardoIbarra, @Theo4u's solution worked

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.