web-dev-qa-db-ja.com

モジュール「ionic-native」が見つかりません

私は試した

npm install ionic-native --save

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

モジュール「ionic-native」が見つかりません!!!解決策をお願いします!!!

エラー：

enter image description here

my ionic info

enter image description here

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 {}
angularcordovatypescriptionic-frameworkionic2
14
moreshwar

"ionic-native": "^3.5.0"からpackage.jsonを削除し、その後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 をご覧ください。

18
Sampath

その包み ionic-nativeはもう存在しません。モジュールは独自のパッケージになりました：

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