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

Ionic Framework Ionic Angular
1

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.

selling-tab.module.ts

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

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
  ],
  declarations: [SellingTabPage,
    AddProductComponent,
    CategoryComponent,
    ],
    entryComponents: [AddProductComponent, CategoryComponent,]
})
export class SellingTabPageModule {}

category.component.ts

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


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

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

constructor(
    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) {
      console.log(error.message);
    }

  }

}

category.component.html

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

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


</ion-content>

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

Thanks in Advance

2

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

3

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

this.modalCtrl.dismiss({
  'dismissed': true
});

any solution, really for me don’t works!