Ionic-framework: Runtime Error Uncaught (in promise): removeView was not found - fast modal dismissing (lazy loaded)

[DatBluBat]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
So I have a simple modal that is created from a page using lazy-loading:

showRegionSearch() {
    let p = this.modalCtrl.create('RegionSearch');
    p.present();
}

I am testing my application through "ionic serve". When my modal is visible I want to just dismiss it by pressing ESCAPE on my keyboard. Everything is working fine when I press ESC button once, but when I fast double click ESCAPE I get this error:

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

Expected behavior:
Dismiss lazy-loaded modal without error no matter how many times and how fast I've pressed ESCAPE button.

Steps to reproduce:
Just create "lazy" ionic app with "lazy" modal from a page and fast double click ESCAPE button to dismiss the modal.

Related code:

let p = this.modalCtrl.create('SomePage');
p.present();

Other information:
My app is fresh and simple.

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

6.5.0

Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.1
Xcode version: Not installed

[Khalid-Nowaf]

I have reproduced the bug and I found out this bug also effects:

• popover component
• action sheet component
• picker-component
• alert component

this bug can be fixed in many ways:

• By adding an Escape Key Event delay
• or By handling the promise this.viewCtrl.dissmis(...) in each component by simply having an empty catch
• or By adding a boolean flag aboutToLeave

@brandyscarney I can open a PR for this bug, should I open 1 PR per component or one PR for all component.

[jgw96]

Hello, thanks for using Ionic we will look into this. @Khalid-Nowaf, it would be awesome if you could open a PR for this. I'll defer to brandy on whether it should be one per component or one for all of them.

[napcat]

I updated to the latest version 3.3.0 and this is also happening in my app.

[kleeb]

Still occuring even on the nightly build

[JorgeGRC]

Same problem here, can't get lazy loading of a modal working... Running on ionic 3.4.0. For the moment I think I'll switch to the non lazy loading conventional approach. @DatBluBat could you please show some code? I'm having trouble even presenting the modal.

[kyr0]

How to hotfix?

@kleeb @napcat @DatBluBat

1. Change all onWillDismiss handler registrations to use the method onDidDismiss instead.
2. Search for any dismiss() call in your code and replace it by dismiss().catch(() => {});. Since there is only this annoying exception being thrown to a potential exception handler, I don't see any problem in a catch-all-ignore attempt here. Please correct me if I'm wrong.

@JorgeGRC Please try that and tell me if it helps. I remember that I had a similar problem with modals and lazy loading. It also led to the removeView was not found error, but it haven't had any in common with the issue above. The root cause of that issue was, that the remote view wasn't found because the module wasn't loaded properly at the time of presenting. The issue described here is about dismissing an already dismissed view.

I remember that I was able to solve the lazy-loading and modal presenting issue just by fixing my imports, declarations and entryComponents of the related module bundle configuration. This is, for example, how a modal module config looks like on my side:

@NgModule({
    declarations: [
        WelcomePage
    ],
    imports: [
        IonicPageModule.forChild(WelcomePage)
    ],
    entryComponents: [
        WelcomePage
    ]
})
export class WelcomePageModule {}

I call the modal lazy loaded like that:

let welcomeModal = this._modalCtrl.create("WelcomePage");
welcomeModal.present();

You might be missing the entryComponents or proper forChild call.

Also make sure you've added the @IonicPage annotation:

@IonicPage({
    priority: "low"
}) 
@Component({
    selector: 'page-welcome',
    templateUrl: 'welcome.html'
})
export class WelcomePage {
}

[JorgeGRC]

@kyr0 thanks for spending some time sharing your code. I'll look into it when I find some time to rollback my changes and see what could I have missed using your code. I'll give it a go, thanks again.

[manucorporat]

Hold on! is this still a problem in 3.5.0? can you submit a minimun code example that reproduces the issue?

[kyr0]

@manucorporat
Well, I'm running [email protected]
I'll look into finding some time for a small plunkr this evening :)

[giovannipds]

@manucorporat yes.

[iSanjayAchar]

I've the same issue here

[shizhenbin]

I've the same issue here when i dismiss the modal and want to pop to previous page, there is my ways to solve this problem,

creat modal:
this.model = this.modalCtrl.create(somePage);
this.model.onDidDismiss((data:{pop:boolean}) => {
if(data){
this.navCtrl.pop();
}
});
this.model.present();

dismiss modal:
goBack() {
this.viewCtrl.dismiss({pop:true});//加参数是为了判断回调是否返回上一页
}

[fdambrosio]

hi, there's the same problem with [email protected]

[aepsetiawan]

I have a same problem..
loader.dismiss();
is double, please check..

[mburger81]

Incredible, this bug is still there from nearly one year.

We can not resolve this issue from client side, this issue must be resolved in ionic framework!

@kyr0 version does work for manual dismissing a modal page but not for double ESCAPE press.

right?

[Screeze]

Same issue here, reported many times by sentry error reporting in my live app :(

[justinestrada]

I get this bug when I use the IonicPage directive and attempt to go back to previous pages.

[FlexWilliams]

Similar to what @aepsetiawan said

I'm on ionic version 3.19.0 but was an error on my part.

My modal was using angular reactive forms and had this snippet of code:

<form [formGroup]="fightForm" (ngSubmit)="save()"> ...</form>

I had a cancel and save button inside the form, with a cancel() and save() method for each (each method calling view controller dismiss()).
So debugging, I realized that whenever i clicked the cancel button, the ngsubmit was also firing, so double dismiss() methods were being called due to the ngsubmit; removing that resolved the issue.

[olaferlandsen]

I'm only put return false on last line of callback like:

let alert : Alert = this.alertCtrl.create({
    title : 'xyz',
    message : 'abc def',
    buttons : [
        {
            text : 'Ok',
            handler : () => {
                alert.dismiss();
                return false; // put this on last line of callback
            }
        }
    ]
});

[hiepxanh]

same issue, so sad :(

[mburger81]

In the new conference app for ionic4 for any view (Toast, Modals, Alerts) they do now this:

const toast = await this.toastCtrl.create({
        message: 'Your support request has been sent.',
        duration: 3000
});
await toast.present();

So they await for the toast or others to presnent.

Not sure if this is NEW and if this is also the solution for IONIC2/3, but it should work. Also I'm not really sure why this should make sense using it on Toast? Toast could we close Toast with ESC or mouse?

@kensodemann can you perhaps help here?

[Robinyo]

https://github.com/ionic-team/ionic/issues/11443 is closed

Try:

...

import { ..., Loading, LoadingController } from 'ionic-angular';

...

export class MyPage implements OnInit, OnDestroy {

  private loading = (() => {

    let loadMessage: Loading;

    return {

      turnOn: () => {

        if (!loadMessage) {
          loadMessage = this.loadingController.create({
            spinner: 'bubbles'
          });
        }

        loadMessage.present();

      },
      turnOff: () => {

        if (loadMessage) {
          loadMessage.dismiss().then(() => {
            loadMessage = null;
          });
        }

      }

    };

  })();

  constructor(...,
              private loadingController: LoadingController,
             ...) {

  }

  public ngOnInit() {

    this.loading.turnOn();

    // do something async
    this.myService.something().then(() => {
      this.loading.turnOff();
    });

    }

  }

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/223