White screen shown after the splash screen after Cordova to Capacitor 3 Migration in Ionic V3

Capacitor
1

Hi,
I did upgrade my Ionic v3 application from Cordova to Capacitor 3 as per the documentation. But when I am running my application on an Android device I am facing an issue of the white screen being displayed for several seconds after the display of the splash screen.
I am currently using the cordova-plugin-splashscreen package for displaying the splash screen and I tried increase the display time of the splash screen by upgrading the config → cordova → preferences → SplashScreenDelay value in the capacitor .config.ts to more seconds but was of no use.
I did try replacing the cordova-plugin-splashscreen with the @capacitor/splash-screen plugin but faced few typescript errors while using and reverted back to the cordova-plugin-splashscreen.

Please suggest a solution for the above white screen issue. Thanks in advance.

2

cordova-plugin-splashscreen is not compatible with Capacitor and it’s skipped, so it won’t do anything in your app, you should use @capacitor/splash-screen.
What’s the typescript error you faced?

Worst case you can always use the Plugins object directly without importing the plugin, that way typescript should not error.

Capacitor.Plugins.SplashScreen.hide();

3

Hi @jcesarmobile ,
Thanks for the quick response. I am getting the below compile time typescript error when I am trying to use the @capacitor/splash-screen plugin:

 ionic-app-scripts 3.2.1 
 build dev started ... 
 clean started ... 
 clean finished in 5 ms 
 copy started ... 
 deeplinks started ... 
 deeplinks finished in 724 ms 
 transpile started ... 
 typescript: node_modules/@capacitor/splash-screen/dist/esm/index.d.ts, line: 1 
            '=' expected. 

       L1:  import type { SplashScreenPlugin } from './definitions';
       L2:  declare const SplashScreen: SplashScreenPlugin;

     typescript: node_modules/@capacitor/splash-screen/dist/esm/index.d.ts, line: 1 
            ';' expected. 

       L1:  import type { SplashScreenPlugin } from './definitions';
       L2:  declare const SplashScreen: SplashScreenPlugin;

 ionic-app-script task: "build" 
 Error: Failed to transpile program 
Error: Failed to transpile program
    at new BuildError (/home/hariharan/Projects/anthems_app_capacitor/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /home/hariharan/Projects/anthems_app_capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
    at new Promise (<anonymous>)
    at transpileWorker (/home/hariharan/Projects/anthems_app_capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
    at Object.transpile (/home/hariharan/Projects/anthems_app_capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
    at /home/hariharan/Projects/anthems_app_capacitor/node_modules/@ionic/app-scripts/dist/build.js:109:82
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Anthems@ ionic:build: `node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build "--platform" "android"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Anthems@ ionic:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/hariharan/.npm/_logs/2021-11-18T17_25_15_904Z-debug.log
[ERROR] An error occurred while running subprocess npm.
        
        npm run ionic:build -- --platform android exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

I am currently using Angular 5 in my Ionic v3 application which has a dependency of typescript 2.7 or less.

Also, I am not sure whether the white screen is exactly because of the splash screen plugin. Could there be any other reason for the display of this white screen?