找不到模块“离子原生”

Question

I tried

npm install ionic-native --save

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

Cannot find module "ionic-native"

Error:

my ionic info

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

You need to remove "ionic-native": "^3.5.0" from your package.json and after that run npm i .

You need to use all your native plugins as providers as shown below.

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 { }

You can read more about this new implementation on official doc here .

Answer 2

The package ionic-native doesn't exist anymore. The modules are now in its own package:

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

Answer 3

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

Answer 4

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