找不到模块“离子原生”

Posted 2023-03-13

【中文标题】找不到模块“离子原生”

【英文标题】：Cannot find module "ionic-native"

【发布时间】：2017-09-20 20:04:31

【问题描述】：

我试过了

npm install ionic-native --save

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

Cannot find module "ionic-native"

错误：

我的离子信息

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 

【参考方案1】：

包ionic-native 不再存在。这些模块现在在自己的包中：

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

【参考方案2】：

您需要从您的package.json 中删除"ionic-native": "^3.5.0"，然后运行npm i。

你需要使用你所有的原生插件作为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 上阅读有关此新实施的更多信息。

【讨论】：

这是我的荣幸 :)

【参考方案3】：

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

【参考方案4】：

如果有人遇到同样的问题。这是由于 @ionic-native 软件包更新到版本 5 造成的。如果您使用 Ionic 3，所有 @ionic-native 软件包都需要使用 @4 参数安装。所以 npm install --save @ionic-native/core@4