IBeacon example code from the Ionic website not working


#1

Ionic version:
3.x (I think so, not 100% sure)

Current behavior:

Expected behavior:
No errors so I can try this wonderful plugin :grin: :thumbsup:

Steps to reproduce:
Updated Cordova and Ionic before starting
cli: ionic start ibeaconscanner blank
cli: ionic cordova platform add android
cli: ionic cordova platform add ios
cli: ionic cordova plugin add cordova-plugin-ibeacon
cli: npm install --save @ionic-native/ibeacon
Added IBeacon import and provider for to app.module.ts
Added IBeacon import to home.ts
Added example code from the Ionic website to home.ts (https://ionicframework.com/docs/native/ibeacon/)

Related code:
app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IBeacon } from '@ionic-native/ibeacon';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    IBeacon,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IBeacon } from '@ionic-native/ibeacon';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private ibeacon: IBeacon) {

  }

  // Request permission to use location on iOS
  this.ibeacon.requestAlwaysAuthorization();
  // create a new delegate and register it with the native layer
  let delegate = this.ibeacon.Delegate();

  // Subscribe to some of the delegate's event handlers
  delegate.didRangeBeaconsInRegion()
    .subscribe(
      data => console.log('didRangeBeaconsInRegion: ', data),
      error => console.error();
    );
  delegate.didStartMonitoringForRegion()
    .subscribe(
      data => console.log('didStartMonitoringForRegion: ', data),
      error => console.error();
    );
  delegate.didEnterRegion()
    .subscribe(
      data => {
        console.log('didEnterRegion: ', data);
      }
    );

  let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');

  this.ibeacon.startMonitoringForRegion(beaconRegion)
    .then(
      () => console.log('Native layer recieved the request to monitoring'),
      error => console.error('Native layer failed to begin monitoring: ', error)
    );

}

Other information:
This is the plugin I’m trying to work with: https://ionicframework.com/docs/native/ibeacon/

Ionic info output:
cli packages: (C:\Users\USERNAME\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.10.2
ionic (Ionic CLI) : 3.10.3

global packages:
Cordova CLI : 7.0.1

local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.1

System:
Android SDK Tools : 26.0.2
Node : v8.2.1
npm : 5.3.0
OS : Windows 10

Ionic info plugin output:
com.unarin.cordova.beacon 3.5.2 "Proximity Beacon Plugin"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”


#2

Any updates already? The code example from the official Ionic documentation is still not working…


#3

This has all to be inside a function. You can just copy it into the class and expect it to work.