Fix: White Screen of Death in Android Studio with Ionic 8.4
If you’re encountering the White Screen of Death in Android Studio while working with Ionic version 8.4, here is a quick fix. The issue often arises when the project runs fine with the ionic serve command but shows a white screen in Android Studio. To resolve this, you need to downgrade the Angular version to 18. Here’s how to do it step by step.
First, delete some specific folders and files from your project. Remove the node_modules folder, along with the android and www folders. Additionally, delete the package-lock.json file. Once these are removed, uninstall Angular globally by running the command npm uninstall -g @angular/cli. This ensures your project is ready for the downgrade process.
Next, clean the npm cache to avoid conflicts. Use the command npm cache clean –force. After clearing the cache, install Angular version 18 globally by running npm install -g @angular/[email protected]. Update your package.json file with the dependencies provided in the attached document. Then, install all necessary packages using the command npm install.
After reinstalling the required dependencies, let’s check if there are any vulnerabilities. To do that, type npm audit. Next, build your project using ionic build. You’ll need to re-add the Android platform, as the android folder was deleted earlier. Use the command ionic capacitor add android to reintroduce the platform, and then synchronize it with Capacitor using npx cap sync. Finally, open the project in Android Studio with npx cap open android.
Once in Android Studio, clean the project by navigating to Build > Clean Project. After cleaning, rebuild the project. Once the build is successful, run the emulator, and the white screen issue should be resolved.
Hope this video was useful.