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

@error264 wrote:

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

Posts: 1

Participants: 1

Read full topic