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