white screen ionic v6.11.8 capacitor

Question

As i'm trying to run the app via capacitor using the command below.

ionic capacitor run android

as it runs in the android studio 4.2 canary 11 successfully when i run my emulator on pixel or via mobile USB debug mode it gives me white screen after capacitor splash screen. If i use chrome chrome://inspect/#devices it shows my app running and as i see my console it also shows me console.log('dangggggggggggg'); which is inside the initializeApp() but i only see white screen. I have gone through many pages for help but still i can't figure out whats the issue of it as chrome debugger doesn't show error in it as well. Here is a screen shot below.

Here are the Url's which i followed.
Why white screen stuck after splash screen in Ionic 4?
https://forum.ionicframework.com/t/white-screen-when-using-capacitor/183825/3
https://github.com/ionic-team/capacitor/issues/960

As i'm using android canary not regular studio because of AMD processor.

Vide

People doesn't know the answer but negative marking is essential for them. – Vide

Answer 1

Changed my Routing from 'home' which pointed to blank the page, to the page which i needed to see. Was a really confusing issue but it lied in my angular app routing altogether.

https://forum.ionicframework.com/t/ionic-v5-capacitor-white-screen/196825/3

Here is my code below which pointed to blank page.

{
    path: '',
    redirectTo: 'home', // It pointed to the blank page
    pathMatch: 'full'
  },
  {
    path: 'recipes', // Used this to run the start page and it worked
    children:[{
      path: '',
      loadChildren: () => import('./recipes/recipes.module').then(m => m.RecipesPageModule)
    },
    {
      path: ':recipeId',
      loadChildren: () => import('./recipes/recipe-detail/recipe-detail.module').then(m => m.RecipeDetailPageModule)
    }
  ]
  m.RecipesPageModule)
  },

Vide

Answer 2

for me the issue was with webDir prop in capacitor.config.json, replaced to be www then it worked.

Ionic Capacitor App Blank/White Screen Problem

Gondar

God bless you, you saved my as$. – Concoct

In my case I had to change it to "dist" – Tit

Answer 3

With Angular version 14.1.3 and ionic 6.20.1 I solved the blank page by modifying the compiler target to es2017 in compilerOptions in file tsconfig.json.

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },

Oceanography