Ionic 5 Create Modal from Service with presentingElement

I’m currently migrating my ionic 4 Project to v5. In some cases i create a Modal within a Service. With the styling for IOS13 Styled Modals i need to Inject the IonRouterOutler. Within a Service i can’t start the App:

Any Ideas, or did someone of the Team can explain how ti solve this? I think adding IonRouterOutler to Modules Providers isn’t the Solution, because i than have to add more and more too.

1 Like

I’m getting the same error when using private routerOutlet: IonRouterOutlet in the constructor of app.component.ts

workaround for now:

export function getRouterOutlet() {
    return document.getElementById('ion-router-outlet-content');
}

so your needs the id="ion-router-outlet-content".

Then instead of calling this.routerOutlet.nativeElement, call the function from above

2 Likes

Thank you! Using

presentingElement: document.getElementById(‘ion-router-outlet-content’),

works as a workaround.

1 Like

Nice solution. A point of clarification, id=“ion-router-outlet-content” should be added to the ion-router-outlet element in app.component.html.

2 Likes

document.getElementById(‘ion-router-outlet-content’) works great when you only open one modal with presentingElement. However, it doesn’t work great when you open multiple modals with presentingElement (the UI gets messed up when closing the the second or top most modal). So I created the following method that can be use within a service but also throughout my application. Because getTop returns a promise you have to use async/await. You still need to add id=“ion-router-outlet-content” (to top level ion-app ion-router-outlet).

async routerOutlet() {
return await this.modalCtrl.getTop() || document.getElementById(‘ion-router-outlet-content’);
}

1 Like