Why am I getting an error that some Ionic components are referring to a value but being used as a type?

Question

Getting a runtime error when running my Ionic application in a couple of components that they refer to a value, but are being used as a type.

I have tried:
* Rerunning $ sudo npm i
* Checking older version of working app to see if these components were in app.component.ts

Code

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make JobListingsPage the root (or first) page
  rootPage = JobListingsPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen
  ) {

Getting the following errors:

Typescript Error
'StatusBar' refers to a value, but is being used as a type here.
src/app/app.component.ts
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen  

Typescript Error
'SplashScreen' refers to a value, but is being used as a type here.
src/app/app.component.ts
  public statusBar: StatusBar,
  public splashScreen: SplashScreen
) {  

Typescript Error
Type 'StatusBarOriginal' is not assignable to type 'Provider'. Type 'StatusBarOriginal' is missing the following properties from type 'ClassProvider': provide, useClass
src/app/app.module.ts
providers: [
  StatusBar,
  SplashScreen,  

Typescript Error
Type 'SplashScreenOriginal' is not assignable to type 'Provider'. Type 'SplashScreenOriginal' is missing the following properties from type 'ClassProvider': provide, useClass
src/app/app.module.ts
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}

Answer 1

First you have to install your components like this:

ionic cordova plugin add cordova-plugin-statusbar
npm install @ionic-native/status-bar

That done you have to import them in your app.component.ts, just add the following on top of the file:

import { StatusBar } from '@ionic-native/status-bar/ngx';

Since Ionic v4 you have to add the /ngx when importing components, in previous versions you would have to use just '@ionic-native/status-bar'