Problems to close modal Ionic 4

I’m having trouble closing a modal

I am making use of the documentation of ionic 4

Can you post the problematic code?

I think there is no problem in the code.

import {Component} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { CrearComandaPage } from './../crear-comanda/';

// servicios
import { ComandasService } from './../services/comandas.service';

    selector: 'app-home',
    templateUrl: '',
    styleUrls: [''],
export class HomePage {

    fecha: any;

    constructor(private servicioComanda: ComandasService, public modalCtrl: ModalController) {


    async crearComanda() {

        const modal = await this.modalCtrl.create({
            component: CrearComandaPage,


        return await modal.present();


import { Component, OnInit} from '@angular/core';
import { ComandasService } from './../services/comandas.service';
import { ModalController } from '@ionic/angular';

    selector: 'app-crear-comanda',
    templateUrl: './',
    styleUrls: ['./'],
export class CrearComandaPage implements OnInit {

    constructor(private comandaServicio: ComandasService, public modalCtrl: ModalController) {}

    ngOnInit() {}

    cerrar() {




<ion-button color="primary" expand="full" (click)="cerrar()"> asd</ion-button>

the modal is presented but when closing it throws the error

I see absolutely nothing wrong with this, but it does not work

Are you on the latest version, rc.0?

You could try, in the modal cmp:

const modal = await this.modalCtrl.getTop();

this also probes and throws the following error

I have the version of ionic 4.6.0, I do not know if it is necessary to update something additional? the CLI or some other dependency?

Hi! I have the same problem than you…

… Still investigating!

I did everything they said in this post but I still have the same problem, and I do not think that adding the modal module to the app module will correct this, in ionic 3 it was not like that !!

i have this @jjdev


ionic (Ionic CLI) : 4.6.0 (C:\Users\Propietario\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.1


cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)


NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
npm : 6.5.0
OS : Windows 10

use ViewController to dismiss modal


in ionic 4 the viewController is no longer used for this case, now the modalController is used

it seems like,I am still not upgraded to Ionic 4, so no comments.:slightly_smiling_face:

He solved the problem, I leave the code for anyone who has the same problem

steep 1
I created the modal as a page

steep 2

I have added in the entryComponent the page of the modal and in turn the module to the imports

import { ModalPage } from './pages/modal/';
import { ModalPageModule } from './pages/modal/modal.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

  declarations: [AppComponent],
  entryComponents: [ModalPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  bootstrap: [AppComponent]
export class AppModule {}

steep 3

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }

only the real pages should remain, for example home which is the home page

steep 4

function to open the modal

import {Component} from '@angular/core';
import { ModalController } from '@ionic/angular';

import { ModalPage } from './../pages/modal/';
    selector: 'app-home',
    templateUrl: '',
    styleUrls: [''],
export class HomePage {

    constructor(private modalController: ModalController) {}

    async abrirModal() {
        const modal = await this.modalController.create({
            component: ModalPage



steep 5

<ion-button color="primary" expand="full" (click)="abrirModal()">Abrir modal  </ion-button>

steep 6
function to close o dismiss the modal in

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

  selector: 'app-modal',
  templateUrl: './',
  styleUrls: ['./'],
export class ModalPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {

  cerrar() {


steep 7

<ion-button color="primary" (click)="cerrar()">cerrar  </ion-button>

and I’ve managed to make it work :slight_smile: thanks to all


Oh, I’m going to test it in my app. Thanks for sharing!

1 Like

Works for me too! :slight_smile:

1 Like

nice, can you mark it as a solution? :grinning:

How do I do that? (I’m very new at this forum)

I have written code in same way but still getting same error

1 Like

You can use the getTop() method in the modal controller to check for an overlay, and then if there is, call dismiss()

1 Like

For anyone having issues calling the function itself to close the modal in Ionic 4, instead of calling onclick="dismiss()", you must call (click)="dismiss()" on the close button.

So it would look like this,

<ion-button (click)="dismiss()">Close</ion-button>


<ion-button onclick="dismiss()">Close</ion-button>

It’s ridiculous how this was the problem for my for a while. Thanks!