Cannot find name 'StatusBar'

Ionic Native
1

So I have three Ionic Native plugins added.
Splash Screen
Camera
Status Bar

All three are updated, in dependencies, in providers, imported, and in the package.json.
I’m not sure why my code won’t read it.
Important Snippets:

providers: [
    Api,
    Items,
    User,
    Camera,
    SplashScreen,
    StatusBar,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    FirebaseProvider
  ]

imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],

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

"dependencies": {
    "@angular/animations": "^6.1.4",
    "@angular/common": "^6.1.4",
    "@angular/compiler": "^6.1.4",
    "@angular/compiler-cli": "^6.1.4",
    "@angular/core": "^6.1.4",
    "@angular/forms": "^6.1.4",
    "@angular/http": "^6.1.4",
    "@angular/platform-browser": "^6.1.4",
    "@angular/platform-browser-dynamic": "^6.1.4",
    "@ionic-native/camera": "^5.0.0-beta.15",
    "@ionic-native/core": "^5.0.0-beta.15",
    "@ionic-native/splash-screen": "^5.0.0-beta.15",
    "@ionic-native/status-bar": "^5.0.0-beta.15",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "angularfire2": "^5.0.0-rc.12",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-ionic": "^5.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "firebase": "^5.4.1",
    "ionic-angular": "^3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },

And this is the line of code failing:

  constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
3

In case somebody has the same problem. It’s caused by @ionic-native packages being updated to version 5. If you use Ionic 3 all @ionic-native packages need to be installed with the @4 parameter. So npm install --save @ionic-native/core@4 and npm install --save @ionic-native/status-bar@4 for example.

2 Likes
4

add ngx to import:

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

5

Yes ,If you are using ionic 3 then install always with @4 parameter like npm install --save @ionic-native/status-bar@4 .Otherwise It would install
the native plugin with ngx package and gives u error