ionic router creates ionic-page-invisible and not removed

Question

ion-router-outlet creates an ion-page-invisible class on the routed component. It doesn't remove it on first load, as a result shows a white screen. Subsequent visits are fine, or a reload will remove it. I tried manually remove the class as I found on the internet, but it doesn't work. This page-invisible is blocking the entire content. You can see the components inside the route on inspection, you can even click on it and it works accordingly but cannot see anything. I've tried rerouting to different components, it is the same. This happens on iOS/safari, mobile and desktop.

I also tried this using regular angular <router-outlet> and that works as expected but I cannot use that here for subsequent components.

My layout:

<ion-app>
        <ion-content class="ion-padding" [scrollEvents]="true" overflow-scroll="false">
            <app-navbar></app-navbar>
            <ion-router-outlet id="main-content"></ion-router-outlet>
        </ion-content>
</ion-app>

Output:

    <ion-router-outlet class="menu-content menu-content-overlay hydrated">
// ion-page-invisible is blocking the view
        <app-component class="ion-page ion-page-invisible">
//shows all the markups in component
</app-component>
    </ion-router-outlet>

Answer 1

One of the reasons I found out this may happen is when you have more than one ion-page nested. e.g.

<ion-page> // <-- one here
  <ion-router-outlet>
    <route path="/">
      <ion-page> // <-- another one here
        <ion-page> // <-- another one here - This one must be removed!
          ...
        </ion-page>
      </ion-page>
    </route>
  </ion-router-outlet>
</ion-page>

Disclaimers: I am using with React. My module version package.json is as follows:

• "@ionic/core": "^6.1.5"
• "@ionic/react": "^6.1.5",
• "@ionic/react-router": "^6.1.5"

Something to do with the 'stack navigation' not working properly, in my case (https://ionicframework.com/docs/react/navigation#ionpage).

Answer 2

I had a similar problem using Angular 17.1.0 and Ionic 8; the problem was apparently in the build – the styles were not being compiled correctly. What worked was disabling build optimization by setting "optimization": false in the Angular.json build options.