Ionic 4 opening modal from within another modal : modal.create() is not a function

Question

I'm trying to open a modal dialog from within another modal dialog, by searching through the web I can see that people did it before without problems, but I can't seem to get it working.

When I try to create my second modal component from the first modal component it says:

TypeError: this.modal.create is not a function

Here's my code (trimmed with the relevant parts).

Component.module.ts

@NgModule({
  declarations: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  imports: [CommonModule, FormsModule, IonicModule, FontAwesomeModule],
  exports: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  entryComponents: [
    QuizResultComponent,
    AnswerRecapComponent
  ]
})
export class ComponentsModule {}

This is how I open the first modal: Exam.page.ts

... 
export class ExamPage implements OnInit {

    ...

    constructor(
        private router: Router,
        private modal: ModalController
    ) {}

    ...

    async openModal(){
        // Creating the result modal
        const modal = await this.modal.create({
        component: QuizResultComponent,
        componentProps: {
            type: 'exam'
        }
        });

        // Registering back to menu event after dismiss
        modal.onDidDismiss().then(_ => this.router.navigate(['/menu']));

        // Showing modal
        return await modal.present();
    }

    ...

}

And this is for the second modal from quiz-result.component.ts where the exception is throw.

... 
export class QuizResultComponent implements OnInit {

    ...

    constructor(
    private modal: ModalController,
    private navParams: NavParams
  ) {}

    ...

    async openAnswerRecap(q) {
        const modal = await this.modal.create({ // This line throws the exception.
            component: AnswerRecapComponent,
            componentProps: {
                question: q.question
            }
        });

        return await modal.present();
    }

    ...

}

I don't really see any problem with this code, is there something that prevents me from opening a modal from another modal component ?

Answer 1

In my case, i created on the second modal controller different name on constructor, like:

First Modal: constructor(private modal: ModalController) Second Modal: constructor(private _modal: ModalController)

And add in your module entryPoint for 2 modals.

Answer 2

The thing to remember is a modal in Ionic v4 is just a component, not a page.

The way I got it to work was by importing both modals (declarations, exports and entryComponents) in a shared module and importing that modal within the parent page's module that displays them. Similar to what OP has done.

I also deleted the modules generated by default by the cli (if you did ionic g page sampleModal).