In Ionic 2, iBeacon integration throws "No provider for IBeacon" error

Question

I'm trying to integrate ibeacon feature in Ionic 2 app.

I'm using https://ionicframework.com/docs/native/ibeacon/ plugin.

Followed the steps as mentioned in the document.

1. Created a provider class.
2. Added the plugin integration.
3. Invoke the provider class in Home page.

But when running the app on android device, getting error,

"Failed to navigate: No provider for IBeacon!"

Please suggest any fix.

Thanks.

Beacon Provider class:

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


}

And in Home page,

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

add

import { IBeacon } from '@ionic-native/ibeacon'; to your app.module.ts

and add IBeacon to your providers in app.module.ts.

That fixed the issue for me.

Answer 2

(This is for Ionic 3 but the process is similar for Ionic 2)

I suggest you put IBeacon definition in app.module.ts under the provider list like this

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