Nested ModalController Not Working Ionic 4

Ionic Framework
1

Hi there,

I’am current working on a Ionic 4 project where i have to open Modal B from Modal A
Modal A Open--> Modal B

// in modal-a.component.ts file
async openModalB() {
      const modal = await this.modalCtrl.create({
          component: ModalBComponent
      });
      const { data } = await modal.onDidDismiss();
      console.log(data);
      await modal.present();
}

Problem:

Modal B is not open at top of Modal A or neither showing any error in developer console.

Ionic:

Ionic:                                                                                             
                                                                                                   
   ionic (Ionic CLI)             : 4.10.1 (C:\Users\Rahadur\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0                                            
   @angular-devkit/build-angular : 0.12.4                                                          
   @angular-devkit/schematics    : 7.2.4                                                           
   @angular/cli                  : 7.2.4                                                           
   @ionic/angular-toolkit        : 1.3.0                                                           
                                                                                                   
Capacitor:                                                                                         
                                                                                                   
   capacitor (Capacitor CLI) : 1.0.0-beta.17                                                       
   @capacitor/core           : 1.0.0-beta.17                                                       
                                                                                                   
System:                                                                                            
                                                                                                   
   NodeJS : v10.5.0 (C:\Program Files\nodejs\node.exe)                                             
   npm    : 6.5.0                                                                                  
   OS     : Windows 10
2

I fixed this problem using bellow change in my function.

// in modal-a.component.ts file
async openModalB() {
      const modal = await this.modalCtrl.create({
          component: ModalBComponent
      });
     // I have to present modal first 
     await modal.present();

     // Then i  have to revived data from  ModalB
     const { data } = await modal.onDidDismiss();
     console.log(data);
}
3

I was trying your solution but I was not successful.
In ModalB I have a button that performs dismiss():

public cancel(): void {
        this.modalCtrl.dismiss();
    }

when I hit the button that runs it, ModalA gets closed instead of ModalB.

How does it work for you?
Maybe you can post the code in ModalB and also the ngModule of the calling page?