Modal: ERROR Error: Uncaught (in promise): overlay does not exist

Hi All,

I have tried to find a solution to a common problem which i have realised a few people have had regarding the dismiss of the modal.

As for my modal structure, i have a page which calls a modal and a button within that which calls another modal

Page 1 --> Modal A --> Modal B

The issue is that Modal B closes without a problem If i use a function on the ion-item which then returns the correct parameter. However, with router link embedded in my HTML the modal does not redirect - maybe router link only works with pages?

When the category is selected and returns to Modal A and an attempt is made to close it, this returns ‘ERROR Error: Uncaught (in promise): overlay does not exist’ if the close button is clicked.


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 { SellingTabPage } from './';
import { AddProductComponent } from './add-product/add-product.component';
import { CategoryComponent } from './category/category.component';

const routes: Routes = [
    path: '',
    component: SellingTabPage

  imports: [
  declarations: [SellingTabPage,
    entryComponents: [AddProductComponent, CategoryComponent,]
export class SellingTabPageModule {}


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { NgModule } from '@angular/core';

  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.scss'],
export class CategoryComponent implements OnInit {

 categoryOptions = [
    'Item 1',
    'Item 2',
    'Item 3',];

    private route: Router,
    private modalCtrl: ModalController
  ) { }

ngOnInit() {
  async close() {
    await this.modalCtrl.dismiss();

  async getCategory(event){

    let selected: any;

    try {
       selected = event.detail.value;
       console.log(selected + ' has been selected');

    } catch (error) {




    <ion-title>Select Category</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="close()">
        <ion-icon slot="icon-only" name="close"></ion-icon>        

    <ion-radio-group (ionChange)="getCategory($event)">
      <ion-item *ngFor="let category of categoryOptions" [routerLink]="['/add-product']" [queryParams]="{ type: category }" routerDirection="back">
        <ion-radio value={{category}} slot="end"></ion-radio>


More code can be showed if needed or if any files are missing

Thanks in Advance

After a few hours of trial and error i managed to find the solution to the problem.

In short the problem for me in this instance was related to the [routerLink] in my html.

  1. Ensure that the component / page is correctly included in declarations and entryComponent section of NgModule of the given page where it will be used.

  2. SOLUTION: If you’re using [routerLink] in your html, ensure that the path matches the path of the page where the modal is being used, after the params have been directed.

For example:

Page A includes Modal A

If you route to another page (Page B) or modal (Modal B) ensure that the path in [routerLink]=PageA

From my limited understanding the modal cannot be dismissed if the path is not the same as where it is initiated from.

Hope that is clear

I’ll try this solution for hours, but still not working, the real solution to this is:

  'dismissed': true

any solution, really for me don’t works!