Ionic-framework: [4.0.0-beta.5] Cannot close modal 'overlay does not exist'

[doender]

After updating to Ionic 4.0.0-beta.5, I get the following error when calling dismiss() on a ModalController when I click on a button:

console.js:35 Error: Uncaught (in promise): overlay does not exist
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at 

Closing the modal through the backdrop works normally.

[woodstream]

How do you use it in ts file? I have found the same problem in PopoverController when use 'this.popoverController.dismiss()'，but use popover which create by PopoverController, popover.dismiss() works well.

[doender]

@woodstream Indeed, I have found the same in the case of modal overlays.

This works (within the component launched as a modal):

constructor(private ctrl: ModalController) {}

public async close() {
   const modal = await this.ctrl.getTop();
   modal.dismiss();
 }

but this doesn't:

constructor(private ctrl: ModalController) {}

public close() {
   this.ctrl.dismiss();
 }

whereas the latter used to work in the previous version.

I am now using this method as a workaround.

[abennouna]

https://beta.ionicframework.com/docs/building/migration#overlay-components

[goelectricstations]

same issue too

[doender]

@abennouna I have read this; this is not the problem. My code used to work in Ionic 4.0.0-beta.4 and is documented here: https://beta.ionicframework.com/docs/api/modal-controller

[HoverBaum]

@woodstream helped us solve this by altering the code creating the modal to:

const modal = await this.modalCtrl.create({
      component: SliderComponent,
    });
    modal.componentProps.modal = modal;
    modal.present();

And then in the modal:

...
@Input() modal: any;
...
// in some function triggered through click.
this.modal.dismiss();
...

[ptitjes]

@HoverBaum, that really feels like a hack... :/

[bleuscyther]

I guess it has to do with that: https://github.com/ionic-team/ionic/commit/c1c5102

from the release note (https://github.com/ionic-team/ionic/releases)

Adding an id to the parrams fixes it but the documentation does not mention what these parameters do (data, role, id ), i only know that you can pass data to the parent using data:

typescript this.modalController.dismiss(null, undefined, 1);

... 'dismiss': (data?: any, role?: string | undefined) => Promise<void>; ...

[pyboosted]

@bleuscyther if we pass 1 as the last argument, it works only for the first dismissing. We can write something like:

this.modalController.dismiss(null, undefined, null);

it would work. But still looks like bug.

[goelectricstations]

I think this is a bug that should be fix without workaround

[bleuscyther]

@goelectricstations true, what i think is happening is that the default value for id is not good. I could propose a pull request but i would like to understand what role and id do.

[peterpeterparker]

Could confirm the same bug

Stacktrace:

console.js:35 ERROR Error: Uncaught (in promise): overlay does not exist
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
at HTMLElement.globalZoneAwareCallback (zone.js:1566)

Code (in my modal):

async close(success: boolean) {
    await this.modalController.dismiss(success);
}

[HoverBaum]

@ptitjes yeah that solution is a hack around. Just wanted to share a temporary solution we found to help out others who might come here looking for one.

Looking forward to a real fix for this 🙂

[nikmartin]

@manucorporat I just updated to "@ionic/angular": "^4.0.0-beta.11", and this problem just surfaced today. is this a regression?

[peterpeterparker]

@nikmartin I've upgraded to beta-11 too, don't face any regressions regarding this

what's your stacktrace and code

[nikmartin]

@peterpeterparker : Two things happened when I updated this morning. First, any page in my app that uses a modal controller, that modal gets loaded when the page loads. As in, I see the modal briefly as the calling page loads. This causes several errors, because route params expected by the moidal are missing. When the main page loads the modal, it loads fine, route params are passed as written, but closing the modal gives this error:

ERROR Error: Uncaught (in promise): overlay does not exist
    at resolvePromise (zone.js:814)
    at zone.js:724
    at rejected (main.js:1121)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3824)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3815)

```.

The modal is loaded this way:

const modal = await this.modalCtrl.create({
component: ConfirmPage,
cssClass: 'nofull-modal',
componentProps: {
order: this.order,
addtlData: addtlData,
},
});
await modal.present();

and in the modal:

async dismiss(isConfirmed) {
await this.modalCtrl.dismiss({ confirmed: isConfirmed }, undefined);
}
```

[peterpeterparker]

@nikmartin the only difference I see is that I don't specify the 2nd parameter in dismiss

you do

 await this.modalCtrl.dismiss({ confirmed: isConfirmed }, undefined);

I do

await this.modalCtrl.dismiss({ confirmed: isConfirmed });

otherwise don't know. Have you check that it's effectively beta.11 which is installed and not an older one (like a old hash in package-lock or something while installing)?

[nikmartin]

Yeah, I've wiped package-lock.json, rm -rf node_modules, etc and called await this.modalCtrl.dismiss({ confirmed: isConfirmed }); with no joy. The weird part is if id DO click dismiss on the modal, it come right back, over and over, and will never go away. It also loads BEFORE the page that calls it which is weird. nothing should be loading the modal without user interaction. I'm guessing it has something to do with angular routing and lazy loading, but I can't nail it down, and it started after upgrading from beta 5.

[bleuscyther]

I remember having this issue.

@nikhildev check your routing file to see if the route to your modal page was not added automatically.

Also in the module file the ConfirmPage should only be in the entryComponents and declarations of the module where you use the modal.
In my terminale there was a compiling error that i had to fix first.

[peterpeterparker]

@nikmartin the source code of your app is public? like I said above it still works fine for me, I could open/close etc. modals in beta.11 no problemo

[ionitron-bot[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.