Ionic-cli: bug: No provider for SplashScreen!

[JilReg]

Bug Report

Ionic version:
4.6

Current behavior:
After creating a clean project and setting up Cordova I get the error No provider for SplashScreen!.

Expected behavior:
Not getting the error.

Steps to reproduce:

ionic start myApp blank

cd myApp

ionic serve (fyi: everything worked fine)

ionic cordova prepare android
    Platform android is not installed! Would    you like to install it?
        Y
ionic cordova run android (fyi: emulator open, checking errors trough chrome://inspect)

Error message:

Error: StaticInjectorError(AppModule)[AppComponent -> SplashScreen]: 
  StaticInjectorError(Platform: core)[AppComponent -> SplashScreen]: 
    NullInjectorError: No provider for SplashScreen!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (vendor.js:45019)
    at resolveToken (vendor.js:45264)
    at tryResolveToken (vendor.js:45208)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:45105)
    at resolveToken (vendor.js:45264)
    at tryResolveToken (vendor.js:45208)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (vendor.js:45105)
    at resolveNgModuleDep (vendor.js:57341)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (vendor.js:58030)
    at resolveDep (vendor.js:58401)
cordova.js:1219 deviceready has not fired after 5 seconds.
cordova.js:1212 Channel not fired: onFileSystemPathsReady
cordova.js:1212 Channel not fired: onIonicProReady

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 

System:

   Android SDK Tools : 26.1.1 (/Users/xxxxxx/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[JilReg]

Apparently I still had to run:

ionic cordova plugin add cordova-plugin-splashscreen
npm install @ionic-native/splash-screen 

https://ionicframework.com/docs/native/splash-screen

I did not thought it's necessary, is it supposed to be like that? (Why is the plugin then installed in the first place. 🤔)

Edit: In the middle of the debugging it, I did sudo npm uninstall -g ionic & sudo npm install -g ionic but the Ionic info output stayed the same. Even though I can not imagine this had something to do with it.

[jase88]

error sounds like you forgot to add _SplashScreen_ to your providers at your _app.module.ts_

...
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

@NgModule({
  ...
  providers: [..., SplashScreen],
})
export class AppModule {}

[carlosnewmusic]

is something that they have added in version 4.5 of ionic (something unusable or bothersome at least for me)
to eliminate it completely:
"cordova-plugin-splashscreen" and "cordova-plugin-statusbar"

ionic cordova plugin rm cordova-plugin-splashscreen
ionic cordova plugin rm cordova-plugin-statusbar
npm uninstall @ionic-native/splash-screen
npm uninstall @ionic-native/status-bar
remove in app.components.ts:
-imports:
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
-constructor:
private splashScreen: SplashScreen,
private statusBar: StatusBar,

• initializeApp:
  this.statusBar.styleDefault();
  this.splashScreen.hide();
  remove in app.module.ts:
  -imports:
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';
  -providers:
  StatusBar,
  SplashScreen,
  remove in plataforms>browser(or the one you have)>config.xml:
  
  
  remove in config.xml
  
  
  where I got part of the solution
  https://stackoverflow.com/questions/53968378/ionic-white-screen-problem-with-splash-screen-hangs-on-first-time-load-ios-io

[liamdebeasi]

Hi there,

Were you able to resolve your issue?

[JilReg]

Hey guys,

thanks for your replies.

@kerosin I triple-checked it, if I create a blank fresh Ionic project, SplashScreen is already in Providers by default.

@carlosnewmusic @liamdebeasi As mentioned above for me apparently

ionic cordova plugin add cordova-plugin-splashscreen
npm install @ionic-native/splash-screen  

did the trick. So for me everything is resolved and works fine.

But in case someone could reproduce the error by following my "Steps to reproduce:" above, it looks strange to me that the error appears on a untouched blank project.

[Yohandah]

I had the same issue in my test file (using Jest) even if I had declared these providers :

```
statusBarSpy = { styleDefault: jest.fn() };
splashScreenSpy = { hide: jest.fn() };
platformReadySpy = Promise.resolve();
platformSpy = {
ready: jest.fn().mockReturnValue(platformReadySpy),
backButton: { subscribeWithPriority: jest.fn() },
is: jest.fn().mockReturnValue(true)
};

TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [IonicModule, RouterTestingModule],
providers: [
{ provide: StatusBar, useValue: statusBarSpy },
{ provide: SplashScreen, useValue: splashScreenSpy },
{ provide: Platform, useValue: platformSpy }
]
}).compileComponents();
```

the reason was that my IDE had imported SplashScreen from @ionic-native/splash-screen/ instead of @ionic-native/splash-screen/ngx.