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.

People doesn't know the answer but negative marking is essential for them. — namco, Sep 21 '20 at 08:56

score 2 · Answer 1 · answered Dec 08 '20 at 12:48

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

answered Dec 08 '20 at 12:48

Muhammed Moussa

4,589
33
27

1

God bless you, you saved my as$. – Grant Jul 01 '21 at 13:39
In my case I had to change it to "dist" – A Petrov Feb 22 '22 at 12:51

score 0 · Accepted Answer · answered Sep 24 '20 at 17:01

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)
  },

Rob Lassche · Answer 3 · 2022-11-04T19:21:40.667

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"
    ]
  },

white screen ionic v6.11.8 capacitor

3 Answers3

Linked