Ionic SplashScreenとStatusBarはCapacitorのプラグインを使うと警告が消えた

はじめに

XcodeでIonic + Capacitorアプリをビルドすると、よく見かけるこのエラー。。。

[warn] - Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed.
⚡️  [warn] - Install the SplashScreen plugin: 'ionic cordova plugin add cordova-plugin-splashscreen'

[warn] - Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
⚡️  [warn] - Install the StatusBar plugin: 'ionic cordova plugin add cordova-plugin-statusbar'

特にビルドが失敗するわけでもなく、警告が出るだけで何事もなく動作するアプリ

いったいこのエラー（ではなく警告）は何なのか？
ついに解決しました！

原因はcordovaのプラグインをcapacitorで使ってる事??

Ionic angular templates are still cordova templates and include some cordova plugins. For now you have to manually replace those plugin usages with capacitor plugin equivalents until the templates are updated.

ふむふむ、要するに。。
Ionic + Angularのテンプレートではデフォルトでcordovaのプラグインが含まれてるが、テンプレートがまた更新されていないうちは手動でCapacitorのプラグインに置き換えてね！

ということだろう。。

「テンプレート」というのは、シンプルにionic startのコマンドで作られるやつのことかな？

Splash Screen

@ionic-native/splash-screen/ngxの代わりに、capacitorのプラグインを使う

app.component.ts

// import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { Platform } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent  {
constructor(
    private platform: Platform,
  ) {
    this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
      SplashScreen.show({
          autoHide: false
        });
     // do something
    SplashScreen.hide();
      });
 }
}

Status Bar

@ionic-native/status-bar/ngxの代わりに、capacitorのプラグインを使う

app.component.ts

// import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Platform } from '@ionic/angular';
import { Plugins, StatusBarStyle } from '@capacitor/core';
const { StatusBar } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent  {
constructor(
    private platform: Platform,
  ) {
    this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
      SplashScreen.show({
          autoHide: false
        });
     // do something
    StatusBar.setStyle({ style: StatusBarStyle.Light });
    SplashScreen.hide();
      });
 }
}

ちなみに、Status Barというのは電波とか電池かが表示されてる部分
style: StatusBarStyle.Darkだと、画像のように背景が黒の時のカラーになる

参考