White Screen on Android Production Build Ionic 8 + Angular 20 + Capacitor 5

Capacitor
1

Migrating my app to Angular 20 and things seemed to be going well. Until I tried to deploy a production build to an Android phone locally. Comes up with a white screen. Was able to hack the build enough to debug in chrome://inspect for the production build, and looked at the DOM:

<my-app>
    <ion-app>
        <my-tabs-component class="ion-page ion-page-invisible">
            <ion-tabs>
                <ion-tab-bar> … </ion-tab-bar>
                <div class="tabs-inner">
                    <ion-router-outlet tabs="true">
                        <my-home-page class="ion-page ion-page-invisible">
                        …

Nooooooo! What’s happening? I’ve been trying to chase this down for days. It works fine if I build for production and deploy to the web. But I end up with a DOM that looks like this there:

<my-app>
    <ion-app>
        <ion-router-outlet class="hydrated menu-content menu-content-overlay">
            #shadow-root (open)
                <my-tabs-component class="ion-page" style="z-index: 101">
                    <ion-tabs>
                        <ion-tab-bar slot="top" role="tablist" class="hydrated"> … </ion-tab-bar>
                        <div class="tabs-inner">
                            <ion-router-outlet tabs="true" class="hydrated">
                                #shadow-root (open)
                                <my-home-page class="ion-page" style="z-index: 101">

So some key differences there, but I don’t know where they are coming from with respect to the capacitor / android production build. It seems strange that there are two ion-router-outlets in what’s deployed to the web, but funny enough that’s where it’s working. Also #shadow-root stuff happening on the web deployment where it’s working, but not on Android. It seems like in Capacitor / Android (haven’t tried IOS yet) it’s not recognizing the route is activated or something.

How do I figure out what’s going on here? I’d rather not have to try rebuilding my app from the ground up using a clean ionic project . And I’m getting fed up with ChatGPT wild goose chases.

2

Did you by chance change to Angular standalone components during your upgrade? If you did, make sure you are importing from @ionic/angular/standalone.

Also check out the starter project (the base project used when creating a new Ionic app) to make sure you didn’t miss any configurations - starters/angular-standalone/base at main · ionic-team/starters · GitHub.

3

Interesting, I guess I’ll do that. I was lazy because all the template errors went away in VSCode if I just put imports: [ IonicModule ] in the component via import { IonicModule } from ‘@ionic/angular’ rather than individually importing every element from @ionic/angular/standalone individually.

4

I removed IonicModule from the imports Arrays of all my standalone components, and replaced it with the relevant components from @ionicionic/angular/standalone… that made things worse, as I get a white screen with no evidence of my application bootstrapping beyond seeing my router-outlet in the dev tools elements source… where to go from here? cc/ @twestrick

5

Not sure, I don’t use Angular. Assuming you have reviewed the starter project and compared it to yours? Any errors in DevTools?