bug: angular devkit, production build causing issues with modalController.dismiss

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

On Android device / simulator, when a modal that contains an ion-slide in its ion-content is opened, it can’t be closed. It doesn’t seem to affect iOS nor web platforms.

https://user-images.githubusercontent.com/216573/128859538-d7044aec-31d7-45a7-b1e2-4ce1bcff3fac.mov

Expected Behavior

Modal should close as expected

Steps to Reproduce

1. Clone this project https://github.com/JumBay/ionic5-modal-issue.
2. npm i
3. run npm run run:android

OR

1. Create a new @ionic/angular blank project
2. Upgrade deps (@ionic/angular and @angular/XXX deps)
3. Replace home.page.ts’ content by:

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

@Component({
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title> Blank </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content [fullscreen]="true">
      <ion-button (click)="openModal()">open modal</ion-button>
    </ion-content>
  `,
})
export class HomePage {
  constructor(private modalController: ModalController) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: ImgViewerComponent,
    });

    modal.present();
  }
}

@Component({
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Try to close it</ion-title>
        <ion-buttons slot="primary">
          <ion-button (click)="close()">
            <ion-icon slot="icon-only" name="close"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content [fullscreen]="true" class="content">
      <ion-slides [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <img [src]="imageUrl" />
          </div>
        </ion-slide>
      </ion-slides>
    </ion-content>
  `,
  styles: [
    `
      ion-slides {
        height: 100%;
      }
    `,
  ],
})
export class ImgViewerComponent {
  imageUrl =
    'https://blog.soat.fr/wp-content/uploads/2017/11/ionic-logo-landscape-600x199.png';

  sliderOpts = {
    zoom: {
      maxRatio: 5,
    },
  };

  constructor(private modalController: ModalController) {}

  close() {
    this.modalController.dismiss();
  }
}

Import ImgViewerComponent in home.module.ts in the declarations array:

  declarations: [HomePage, ImgViewerComponent]

Code Reproduction URL

https://github.com/JumBay/ionic5-modal-issue

Ionic Info

Ionic:

   Ionic CLI                     : 6.16.3 (/Users/jb/.asdf/installs/nodejs/14.17.3/.npm/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.13
   @angular-devkit/build-angular : 12.2.0
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.2.0
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.1.2
   @capacitor/core    : 3.1.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.17.3 (/Users/jb/.asdf/installs/nodejs/14.17.3/bin/node)
   npm    : 6.14.13
   OS     : macOS Big Sur

Additional Information

No response

[liamdebeasi]

Thanks for the issue! This has been resolved in Angular DevKit. Please update to the latest version to receive this fix:

npm install @angular-devkit/build-angular@latest

[liamdebeasi]

Thanks! Looks like there was a bug in @angular-devkit/build-angular@12.2.0 that caused this issue. We are looking into reporting this to the Angular team.