Error: "SplashScreen" plugin is not implemented on iOS

Viewed 2

I can't seem to get SplashScreen working for iOS Simulator on OS X Monterey 12,6

Capacitor Angluar Splash Screen Error: "SplashScreen" plugin is not implemented on iOS CapacitorException

My package.json looks like this:

  "private": true,
  "dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.1",
    "@angular/forms": "^14.2.2",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@awesome-cordova-plugins/native-page-transitions": "^5.45.0",
    "@awesome-cordova-plugins/sign-in-with-apple": "^5.45.0",
    "@capacitor-firebase/app": "^1.0.0",
    "@capacitor-firebase/authentication": "^1.0.0",
    "@capacitor-firebase/messaging": "^1.0.0",
    "@capacitor/android": "4.2.0",
    "@capacitor/app": "4.0.1",
    "@capacitor/camera": "^4.1.1",
    "@capacitor/core": "4.2.0",
    "@capacitor/device": "^4.0.1",
    "@capacitor/filesystem": "^4.1.1",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/ios": "4.2.0",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/network": "^4.0.1",
    "@capacitor/preferences": "^4.0.1",
    "@capacitor/push-notifications": "^4.1.0",
    "@capacitor/splash-screen": "^4.0.1",
    "@capacitor/status-bar": "4.0.1",
    "@ionic-native/firebase-dynamic-links": "^5.36.0",
    "@ionic-native/geolocation": "^5.36.0",
    "@ionic-native/native-geocoder": "^5.36.0",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@pantrist/capacitor-firebase-dynamic-links": "^4.0.0",
    "@trapezedev/configure": "^5.0.3",
    "com.telerik.plugins.nativepagetransitions": "^0.7.0",
    "cordova-plugin-ionic": "5.5.2",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-sign-in-with-apple": "^0.1.2",
    "firebase": "^9.10.0",
    "firebase-tools": "^11.9.0",
    "formidable": "^3.2.4",
    "ion-custom-form-builder": "^0.1.6",
    "ionicons": "^6.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "uuid": "^9.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/language-service": "^14.0.0",
    "@capacitor/cli": "4.2.0",
    "@capacitor/configure": "^1.0.28",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.7.3"
  },
  "description": "An Ionic project"
}

and my home.page.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { UserService } from '../services/user.service';
import { AlertController, LoadingController } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  user = this.authService.user;
  constructor(
    private loadingController: LoadingController,
    private authService: AuthService,
    private userService: UserService
    ) { 

    }

  ngOnInit() {
    this.showSplashScreen(); 
  }

  async showSplashScreen() {
    await SplashScreen.show({
      showDuration: 2000,
      autoHide: true,
    });
  }

}

I appreciate your help in advance, I've tried everything and stuck, wondering whether or not to use Cordova splash screen instead

0 Answers
Related