[Ionic 4] Modal HTML rendering but not showing

Ionic Framework
1

Hi All,

So i’ve been looking at the docs for ionic 4 (specifically the modal controller) and they are exceptionally sparse compared to the ionic 3 docs.

Therefore on my ventures across google i’ve been looking for how to make a modal show, as it is not working in my project at all.

My steps so far:

Generate a new component:

ionic g component modules/qr-scanner-modal

Then i’ve imported said component into my app.module.ts file as follows:

@NgModule({
  declarations: [AppComponent, QrScannerModalComponent],
  entryComponents: [QrScannerModalComponent],
 ...
});

Then ran the modal code as normal: (on another page)

import { QrScannerModalComponent } from '../modals/qr-scanner-modal/qr-scanner-modal.component';
import { ModalController } from '@ionic/angular';
...
constructor(private modalController: ModalController) { }
...
async showModal() {
  const modal = await this.modalController.create({
    component: QrScannerModalComponent
  });
  return await modal.present();
}

I have also tried creating a page and putting it in the app.module.ts’s imports section and calling it that way, as well as moving the modal component from the app.module.ts and putting it into the module of the page i’m calling it from.

Most of the time there is no error, but upon inspection via the chrome dev tools, just before the tag when i press a button to load the modal the following code appears:

<ion-modal-controller class="hydrated"></ion-modal-controller>

Which to my understanding means that the modal controller is working as it should be, however my screen still shows no modal.

I’ve checked all my SASS files to make sure no CSS is interrupting the modal showing, but it doesn’t seem to be.

I’ve also noticed many other users having the same issue with no fixes really in sight. Has anyone found a solution to this problem?

Kind Regards,

Matt

2

If that could help, I wrote that about modal in Ionic v4: https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3 (or crossposted on dev.to if you rather like https://dev.to/daviddalbusco/how-to-declare-and-use-modals-in-ionic-v4-3nj7)

4

I have been facing same issue …did you found any solution HeyItsMatty
i need a help