找不到模塊 「離子天然的」

Question

我試圖

npm install ionic-native --save

npm install @ionic-native/core --save both command still give Runtime error

找不到模塊 「離子天然的」 ！請任何解決方案！

錯誤：

我離子信息

的package.json

{ 
    "name": "ionic-hello-world", 
    "author": "Ionic Framework", 
    "homepage": "http://ionicframework.com/", 
    "private": true, 
    "scripts": { 
    "clean": "ionic-app-scripts clean", 
    "build": "ionic-app-scripts build", 
    "ionic:build": "ionic-app-scripts build", 
    "ionic:serve": "ionic-app-scripts serve" 
    }, 
    "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-native/core": "^3.5.0", 
    "@ionic-native/device": "^3.5.0", 
    "@ionic-native/diagnostic": "^3.5.0", 
    "@ionic-native/geolocation": "^3.4.4", 
    "@ionic-native/location-accuracy": "^3.5.0", 
    "@ionic-native/native-storage": "^3.5.0", 
    "@ionic-native/network": "^3.5.0", 
    "@ionic-native/splash-screen": "^3.5.0", 
    "@ionic-native/status-bar": "^3.5.0", 
    "@ionic/storage": "^2.0.0", 
    "@types/cordova-plugin-network-information": "0.0.3", 
    "ionic-angular": "2.2.0", 
    "ionic-native": "^3.5.0", 
    "ionicons": "3.0.0", 
    "rxjs": "5.0.1", 
    "sw-toolbox": "3.4.0", 
    "zone.js": "0.7.2" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "1.1.4", 
    "typescript": "2.0.9" 
    }, 
    "cordovaPlugins": [ 
    "cordova-plugin-whitelist", 
    "cordova-plugin-statusbar", 
    "cordova-plugin-console", 
    "cordova-plugin-device", 
    "ionic-plugin-keyboard", 
    "cordova-plugin-splashscreen" 
    ], 
    "cordovaPlatforms": [], 
    "description": "attendance: An Ionic project" 
} 

app.componet.ts

import { Component } from '@angular/core'; 
import { Events, Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 


import { Storage } from '@ionic/storage'; 

//import { TabsPage } from '../pages/tabs/tabs'; 
import { LoginPage } from '../pages/login/login'; 

import { LoginService } from'../providers/login-service'; 
import { GlobalVars } from'../providers/global-vars'; 

import { Device } from '@ionic-native/device'; 
import { DatePipe } from '@angular/common'; 



@Component({ 
    templateUrl: 'app.html', 
    providers: [LoginService,GlobalVars] 
}) 
export class MyApp { 
    rootPage = LoginPage; 

    constructor(platform: Platform, public storage: Storage,public events: Events,public loginService: LoginService,private device: Device,public datepipe: DatePipe,public globalVars: GlobalVars) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    //setInterval(this.checkdevice, 1000); 

     this.saveDevice(); 
    } 

    saveDevice(){ 
     //alert("Hello") 
     var d = new Date(); 
     var currdate = this.datepipe.transform(d, 'yyyy-MM-dd hh:mm:ss'); 

     //alert(this.device.uuid+" "+this.device.model+" "+this.device.platform+" "+this.device.version+" "+currdate); 
     this.loginService.saveDevice(this.device.uuid,this.device.model,this.device.platform,this.device.version,currdate).subscribe(
       data => { 
        console.log("data->"+JSON.stringify(data)); 
        //alert(JSON.stringify(data)); 
       }, 
       err => { 
        console.log(err); 
       }, 
       () => console.log('Login Search Complete') 

      ); 
    } 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, ErrorHandler } from '@angular/core'; 
import { Device } from '@ionic-native/device'; 
import { IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular'; 
import { IonicStorageModule } from '@ionic/storage'; 
import { MyApp } from './app.component'; 
import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import { LoginPage } from '../pages/login/login'; 
import { MondaleditprofilePage } from '../pages/mondaleditprofile/mondaleditprofile'; 
import { SignupPage } from '../pages/signup/signup';//mondal page 

import { LoginService } from'../providers/login-service'; 
import { GlobalVars } from'../providers/global-vars'; 
import { Profileservices } from'../providers/profileservices'; 
import { GlobalFunctions } from'../providers/global-functions'; 
import { ConnectivityService } from '../providers/connectivity-service'; 


import { DatePipe } from '@angular/common'; 
import { Geolocation } from '@ionic-native/geolocation'; 
import { Diagnostic } from '@ionic-native/diagnostic'; 
import { LocationAccuracy } from '@ionic-native/location-accuracy'; 
import { Network } from '@ionic-native/network'; 



/* { 
     name: '__mydb', 
     driverOrder: ['indexeddb', 'sqlite', 'websql'] 
    }*/ 
@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    LoginPage, 
    MondaleditprofilePage, 
    SignupPage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    IonicStorageModule.forRoot() 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    LoginPage, 
    MondaleditprofilePage, 
    SignupPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},GlobalVars,LoginService,Storage,Profileservices,DatePipe,Device,GlobalFunctions,Geolocation,Diagnostic,LocationAccuracy,ConnectivityService,Network] 
}) 
export class AppModule {} 

Answer 1

您需要從package.json和運行npm i後刪除"ionic-native": "^3.5.0"。

您需要使用所有原生插件作爲providers，如下所示。

app.component.ts

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

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 
     platform.ready().then(() => { 
      statusBar.styleDefault(); 
      splashScreen.hide(); 
     }); 
    } 

app.module.ts

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

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

你可以閱讀更多關於official doc here這個新的實現。

Answer 2

ionic-native不存在了的包。該模塊現在是在其自己的包：

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