Ionic-native: 'SplashScreen' refers to a value, but is being used as a type here.

[JandroMejia97]

I'm submitting a ... (check one with "x")
[X ] bug report
[ ] feature request
[ ] support request

Current behavior:

After updating to the latest version of @ionic-native/core. When I execute the command ionic build --prod I have the following error:

ERROR in src/app/app.component.ts:27:27 - error TS2749: 'SplashScreen' refers to a value, but is being used as a type here.

27     private splashScreen: SplashScreen,
                             ~~~~~~~~~~~~
src/app/app.module.ts:43:5 - error TS2322: Type 'SplashScreenOriginal' is not assignable to type 'Provider'.
  Type 'SplashScreenOriginal' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.

43     SplashScreen,
       ~~~~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.

        ng run app:build:production exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Expected behavior:

The error appeared after this update, it is assumed that when executing this command it should compile.
Steps to reproduce:

• Update to the latest version of this library
• Run ionic build --prod command

Related code:
app.component.ts file:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

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

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   Ionic CLI                     : 6.1.0 (/home/mejia97/.nvm/versions/node/v13.7.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.900.3
   @angular-devkit/schematics    : 9.0.3
   @angular/cli                  : 9.0.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v13.7.0 (/home/mejia97/.nvm/versions/node/v13.7.0/bin/node)
   npm    : 6.13.6
   OS     : Linux 4.19

[benvallack]

I just dealt with this issue - you don't need to use these lines:
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Replace them with this:

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

const { StatusBar,SplashScreen } = Plugins;

Then in your code instead of using this: this.statusBar.styleDefault(); - change it to use this:
StatusBar.setStyle({style:StatusBarStyleDark})

[JandroMejia97]

It work for me

[kapilraghuwanshi]

You can give a specific color (like your app's theme color)-

StatusBar.setBackgroundColor({ color: '#d62537' });

[bot101]

I just dealt with this issue - you don't need to use these lines:
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Replace them with this:

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

const { StatusBar,SplashScreen } = Plugins;

Then in your code instead of using this: this.statusBar.styleDefault(); - change it to use this:
StatusBar.setStyle({style:StatusBarStyleDark})

This approach is for Capacitor projects, not Cordova. If this works in a Cordova project, I'll be surprised. Not the right solution for Cordova.