Ionic 2では、iBeaconインテグレーションで「IBeaconのプロバイダがありません」というエラーが発生しました

Question

Ionic 2アプリでイベコン機能を統合しようとしています。

私はhttps://ionicframework.com/docs/native/ibeacon/プラグインを使用しています。

この文書に記載されている手順に従います。

1. プロバイダークラスを作成しました。
2. プラグインの統合が追加されました。
3. [ホーム]ページでプロバイダクラスを呼び出します。

しかし、Androidデバイス上でアプリケーションを実行、エラーを取得し、

は "移動しないために失敗しました：！IBeacon用ませプロバイダを"

修正をお願いいたします。

ありがとうございました。

ビーコンProviderクラス：

import { Injectable } from '@angular/core'; 
import { Platform, Events } from 'ionic-angular'; 
import { IBeacon } from '@ionic-native/ibeacon'; 



/* 
    Generated class for the BeaconProvider provider. 
// 
    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class BeaconProvider { 

    delegate: any; 
    region: any; 

    constructor(public platform: Platform, public events: Events, private ibeacon : IBeacon) { 
    } 

    initialise(): any { 
    let promise = new Promise((resolve, reject) => { 
     // we need to be running on a device 
     if (this.platform.is('cordova')) { 

     // Request permission to use location on iOS 
     this.ibeacon.requestAlwaysAuthorization(); 

     // create a new delegate and register it with the native layer 
     this.delegate = this.ibeacon.Delegate(); 

     // Subscribe to some of the delegate’s event handlers 
     this.delegate.didRangeBeaconsInRegion() 
      .subscribe(
      data => { 
      this.events.publish('didRangeBeaconsInRegion', data); 
      }, 
      error => console.error() 
     ); 

     // setup a beacon region – CHANGE THIS TO YOUR OWN UUID 
     this.region = this.ibeacon.BeaconRegion('deskBeacon', 'E2C56DB5-DFFB-48D2-B060-D0F5A71096E0'); 

     // start ranging 
     this.ibeacon.startRangingBeaconsInRegion(this.region) 
      .then(
     () => { 
      resolve(true); 
      }, 
      error => { 
      console.error('Failed to begin monitoring: ', error); 
      resolve(false); 
      } 
     ); 
     } else { 
     console.error('This application needs to be running on a device'); 
     resolve(false); 
     } 
    }); 

    return promise; 
    } 


} 

、ホームページで

は、

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { AuthService } from '../../providers/auth-service'; 
import { LoginPage } from '../login/login'; 
import { BeaconProvider } from '../../providers/beacon-provider'; 
import { BeaconModel } from '../../models/beacon-module'; 
import { Platform, Events } from 'ionic-angular'; 
import { NgZone } from '@angular/core'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers : [BeaconProvider] 
}) 

Answer 1

はあなたがhome.tsのコンストラクタでサービスを追加しようとしたことがありますか？

constructor(private myService: IBeacon){ 

} 

Answer 2

'イオンネイティブ/ ibeacon @' から

インポート{IBeacon}を加えます。あなたのapp.module.ts

に、app.module.tsのプロバイダにIBeaconを追加してください。

これで問題が解決しました。

Answer 3

は（これはイオン3用ですが、プロセスはイオン2についても同様である）あなたが呼び出されたプロバイダで宣言しました。この

@NgModule({ 
    declarations: [ 
    MyApp, 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    HttpClientModule, 
    AngularFireDatabaseModule, 
    AngularFireModule.initializeApp(config), 
    AngularFireAuthModule, 
    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [HttpClient] 
     } 
    }), 
    IonicModule.forRoot(MyApp), 
    IonicStorageModule.forRoot() 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    ], 
    providers: [ 
    Api, 
    Items, 
    User, 
    Camera, 
    CardIO, 
    NFC, 
    Ndef, 
    IBeacon, 
    Stripe, 
    SplashScreen, 
    StatusBar, 
    { provide: Settings, useFactory: provideSettings, deps: [Storage] }, 
    // Keep this to enable Ionic's runtime error handling during development 
    { provide: ErrorHandler, useClass: IonicErrorHandler }, 
    FirebaseProvider, 
    BarcodeScanner, 
    AuthProvider, 
    BeaconProvider, 
    ] 
}) 
export class AppModule { }