Search code examples
ionic2ionic-native

Ionic serve gives typescript errors when updating to ionic-native v3


I get Typescript errors for every item from the native imports, when running ionic serve. This is after I updated to ionic-native v3. All the items from the new @ionic-native are not recognised by Typescript. I updated typescript to different v2 versions but can't get it to work.

I dit not changed any of my other code. It is not only related to the SplashScreen. All my references to the objects I used to import through 'ionic-native' (old style) and now import through @ionic-native/{plugin-name} give these Typescript Errors.

Can anybody please help? Can't serve or build my app at this moment

For example:

property hide does not exist on type typeof SplashScreen

I changed my imports to

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

My ionic info:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.0.0
Xcode version: Not installed

My ionic plugin ls

cordova-plugin-app-event 1.2.0 "Application Events"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-camera 2.4.0 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.6 "Console"
cordova-plugin-device 1.1.5 "Device"
cordova-plugin-fcm 2.1.1 "FCMPlugin"
cordova-plugin-nativestorage 2.2.1 "NativeStorage"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.6 "SocialSharing"
de.appplant.cordova.plugin.local-notification 0.8.4 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-barcodescanner 6.0.5 "BarcodeScanner"

My package.json

"dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "@ionic-native/core": "^3.1.0",
    "ionicons": "3.0.0",
    "ionic-angular": "2.2.0",
    "rxjs": "5.0.1",
    "zone.js": "0.7.2",
    "sw-toolbox": "3.5.1",
    "babel-core": "^6.24.0",
    "d": "^1.0.0",
    "ng2-translate": "^4.0.0",
    "@ionic-native/barcode-scanner": "^3.1.0",
    "@ionic-native/local-notifications": "^3.1.0",
    "@ionic-native/native-storage": "^3.1.0",
    "@ionic-native/social-sharing": "^3.1.0",
    "@ionic-native/splash-screen": "^3.1.0",
    "@ionic-native/status-bar": "^3.1.0"

  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.1.4",
    "@ionic/cli-build-ionic-angular": "0.0.3",
    "@ionic/cli-plugin-cordova": "0.0.9",
    "typescript": "2.0.9"
  }

tsc -v

Version 2.2.1

Solution

  • According to the updated docs here, you need to inject Splashscreen in the constructor.

    constructor(private splashScreen: SplashScreen) { }
    this.splashscreen.hide();
    

    In previous versions you would use the Splashscreen that was imported directly to call the methods.