bug: Ion-Modal dismiss issue

[oksana1024]

Bug Report

Ionic version:

[x] 4.7.4

Current behavior:

I am trying to use one page as modal in another page. So I followed many articles related with that. Modal is presented successfully. But in modal page, I can't dismiss modal itself.

Expected behavior:

Modal should be dismissed and return some values to parent component.

Steps to reproduce:

Related code: First I create modal using ionic generate page command. And I removed his route in app-routing.module.ts. Second I imported modal page module in the parent page module. I think it is lazyloading of modal in ionic framework. Codes are following:

• Parent page module.ts file import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ModalTestPage } from './modal-test.page'; import { FirstmodalModule } from '../../announcements/firstmodal.module';

const routes: Routes = [ { path: '', component: ModalTestPage } ];

@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, FirstmodalModule,
RouterModule.forChild(routes) ], declarations: [ModalTestPage] }) export class ModalTestPageModule {}

• This is parent page.ts file import { Component, OnInit, AfterViewInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; import { CameraPage } from '../camera.page'; import { FirstmodalPage } from '../../announcements/firstmodal.page';

@Component({ selector: 'app-modal-test', templateUrl: './modal-test.page.html', styleUrls: ['./modal-test.page.scss'], }) export class ModalTestPage implements OnInit, AfterViewInit {

public updateID: number; public submitErr: any; public currentModal: any = null;

constructor(private modalCtrl: ModalController) { console.log("Modal Test page View Constructor.") }

ngAfterViewInit() { this.showModal(); }

public async showModal() { await this.modalCtrl.create({ component: AnnouncementsPage, componentProps: { 'first': true, 'second': 'OKOKOK' } }).then((modal) => { this.currentModal = modal; this.currentModal.onDidDismiss().then((data) => { console.log("Modal Data = ", data); }) this.currentModal.present(); });

}

}

• This is first modal module.ts file import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

const routes: Routes = [ { path: '', component: FirstmodalPage } ];

@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, RouterModule.forChild(routes) ], declarations: [FirstmodalPage], exports: [FirstmodalPage] }) export class FirstmodalPageModule { }

• This is the first modal page.ts file import { Component, OnInit, AfterViewInit } from '@angular/core'; import { ErrorsService } from '../../services/errors/errors.service'; import { LoadingController, ToastController, ModalController } from '@ionic/angular';

@Component({ selector: 'app-firstmodal', templateUrl: './firstmodal.page.html', styleUrls: ['./firstmodal.page.scss'], })

export class AnnouncementsPage implements OnInit, AfterViewInit {

constructor( private modalCtrl: ModalController ) { }

cancelModal() { this.modalCtrl.dismiss(null, undefined); }

}

I tried to call candelModal() function But it shows following error: Error: Uncaught (in promise): overlay does not exist at resolvePromise (polyfills.js:4817) at Function.ZoneAwarePromise.reject (polyfills.js:4909) at dismissOverlay (vendor.js:93156) at Object.dismiss (vendor.js:93083) at ModalController.push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.dismiss (vendor.js:89811) at FirstmodalPage.push../src/app/pages/firstmodal/firstmodal.page.ts.FirstmodalPage.cancelModal (pages-modal-test-modal-test-module.js:177) at Object.eval [as handleEvent] (ng:///FirstmodalPageModule/FirstmodalPage.ngfactory.js:67) at handleEvent (vendor.js:65102) at callWithDebugContext (vendor.js:66172) at Object.debugHandleEvent [as handleEvent] (vendor.js:65899)

Ionic info:

My Ionif Info: Ionic:

Ionic CLI : 5.2.3 (C:\Users\BooKu\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.7.4 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : not installed Cordova Platforms : android 7.1.4 Cordova Plugins : not available

Utility:

cordova-res : 0.3.0 native-run : 0.2.5

System:

Android SDK Tools : 26.1.1 (D:\Android_sdk\Sdk) NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe) npm : 6.11.3 OS : Windows 10

I am working on that issue for long time. Please help me if you have any suggestion. Thanks.

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? Alternatively, you can use StackBlitz to create a reproduction: https://stackblitz.com/edit/ionic-v4-angular-tabs.

[Nilomiranda]

Have you tried creating the modal as a component instead of a page? That's what I normally do

[ajayshah1992]

I am also having same error. ModalController.push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.dismiss

[ajayshah1992]

core.js:9110 ERROR Error: Uncaught (in promise): overlay does not exist at resolvePromise (zone-evergreen.js:797) at Function.reject (zone-evergreen.js:889) at dismissOverlay (overlays-6ea64c21.js:82) at Object.dismiss (overlays-6ea64c21.js:10) at ModalController.push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.dismiss (fesm5.js:5173) at LocationPage.dismiss (location.page.ts:137) at Object.eval [as handleEvent] (LocationPage.html:7) at handleEvent (core.js:38098) at callWithDebugContext (core.js:39716) at Object.debugHandleEvent [as handleEvent] (core.js:39352) defaultErrorLogger @ core.js:9110 handleError @ core.js:9162 next @ core.js:34915 schedulerFn.isAsync @ core.js:31051 tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:31013 zone.runOutsideAngular @ core.js:34240 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124 runOutsideAngular @ core.js:34127 onHandleError @ core.js:34237 handleError @ zone-evergreen.js:363 runGuarded @ zone-evergreen.js:137 api.microtaskDrainDone @ zone-evergreen.js:663 drainMicroTaskQueue @ zone-evergreen.js:566 invokeTask @ zone-evergreen.js:469 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback @ zone-evergreen.js:1629

[Nilomiranda]

core.js:9110 ERROR Error: Uncaught (in promise): overlay does not exist at resolvePromise (zone-evergreen.js:797) at Function.reject (zone-evergreen.js:889) at dismissOverlay (overlays-6ea64c21.js:82) at Object.dismiss (overlays-6ea64c21.js:10) at ModalController.push../node_modules/@ionic/angular/dist/fesm5.js.OverlayBaseController.dismiss (fesm5.js:5173) at LocationPage.dismiss (location.page.ts:137) at Object.eval [as handleEvent] (LocationPage.html:7) at handleEvent (core.js:38098) at callWithDebugContext (core.js:39716) at Object.debugHandleEvent [as handleEvent] (core.js:39352) defaultErrorLogger @ core.js:9110 handleError @ core.js:9162 next @ core.js:34915 schedulerFn.isAsync @ core.js:31051 tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:31013 zone.runOutsideAngular @ core.js:34240 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124 runOutsideAngular @ core.js:34127 onHandleError @ core.js:34237 handleError @ zone-evergreen.js:363 runGuarded @ zone-evergreen.js:137 api.microtaskDrainDone @ zone-evergreen.js:663 drainMicroTaskQueue @ zone-evergreen.js:566 invokeTask @ zone-evergreen.js:469 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback @ zone-evergreen.js:1629

Do you have a repo where I can take a look at this?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!