Switching to Capacitor

Ionic Framework
1

After switching to Capacitor and following instructions about removing the Cordova Plugin SplashScreen as mentioned on Using with Ionic Framework | Capacitor Documentation I get this warning in the console:

common.js:295 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

when running npx cap serve
is it possible to remove this or is it a bug in Ionic4 ?

2

You can also uninstall @ionic-native/splashscreen and remove the code - then this message should be gone. You can manage the Splashscreen with Capacitor: https://capacitor.ionicframework.com/docs/apis/splash-screen

3

You pointed me in the right direction, as it is not enough just to remove the plugin as stated on the Capacitor-website, I also need to remove the usage of the plugin from and app.component.ts, where I had these statements

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

I have now replaced that with:

import {
Plugins,
StatusBarStyle,
} from ‘@capacitor/core’;

const { StatusBar } = Plugins;
const { SplashScreen } = Plugins;

and

this.platform.ready().then(() => {
  StatusBar.setStyle({
    style: StatusBarStyle.Light
  });
  SplashScreen.hide();
});

in app.component.ts

But I did not find a way to uninstall @ionic-native/splashscreen as it is not anywhere in my configuration

4

You should be able to just run npm uninstall @ionic-native/splashscreen, and you can also import both the StatusBar and SplashScreen in one line:

const { StatusBar, SplashScreen } = Plugins;

Make sure to run the Capacitor sync or update commands whenever you change plugins too :slight_smile:

2 Likes
5

Looking in config.xml there are a loot of settings for SplashScreen

<preference name=“SplashMaintainAspectRatio” value=“true” />
<preference name=“FadeSplashScreenDuration” value=“300” />
<preference name=“SplashShowOnlyFirstTime” value=“false” />
<preference name=“SplashScreen” value=“screen” />
<preference name=“SplashScreenSpinnerColor” value=“white” />
<preference name=“ShowSplashScreenSpinner” value=“true” />
<preference name=“FadeSplashScreen” value=“true” />
<preference name=“AutoHideSplashScreen” value=“false” />
<preference name=“SplashScreenDelay” value=“60000” />
<preference name=“orientation” value=“portrait” />
<preference name=“SplashReloadOnOrientationChange” value=“true” />

Should they all just be removed, when switching to Capacitor?

6

Those are not used by Capacitor, so yes.
You might want to see if Capacitor’s SplashScreen recreates those all though.

7

Capacitor can be configured in capacitor.config.json, so I will try deleting and hope for the best :slight_smile:

1 Like