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，然后在providers之后删除。

您需要将所有原生插件用作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.component.ts

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

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

<强> app.module.ts

{{1}}

您可以在official doc here上了解有关此新实施的更多信息。

Answer 2

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

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

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

找不到模块“离子原生”

4 个答案: