IBeacon example code from the Ionic website not working

Ionic Framework ionic-v3
1

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

Current behavior:

Current behavior
mTdsChT.png943×743

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.

4

hey i am not able to advertise

export class HomePage {
  homePage: string =null;
  outputdata: any;
  outputerror: any;
  inputdata: any;
  inputerror: any;
  beaconData: any;


  constructor(public change: ChangeDetectorRef,public platform: Platform,private ibeacon: IBeacon) {
    this.homePage =  "1000";
  }
 watch() {
   this.platform.ready().then(()=>{
     this.ibeacon.startAdvertising(this.ibeacon.BeaconRegion('deskBeacon', '7813eab8-9ee5-447b-b3ee-6179c9b9877a',1,1,true), -59).then(
       () => this.inputdata = "yay!" + console.log("yay! task done"),
       error => this.inputerror = error
     )
   })

}
monitor(){
  this.platform.ready().then(()=>{
    // 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 => this.outputdata = 'didRangeBeaconsInRegion: '+ data + console.log(data),
        error => this.outputerror = error
      );
    delegate.didStartMonitoringForRegion()
      .subscribe(
        data => this.outputdata ='didStartMonitoringForRegion: '+ data + console.log(data),
        error => this.outputerror = error
      );
    delegate.didEnterRegion()
      .subscribe(
        data => {
          this.outputdata = 'didEnterRegion: '+ data + console.log(data);
        }
      );



    // this.ibeacon.startMonitoringForRegion(beaconRegion)
    //   .then(
    //     () => this.outputdata = 'Native layer received the request to monitoring'  ,
    //     error => this.outputerror = 'Native layer failed to begin monitoring: ' + error
    //   );
    this.ibeacon.startRangingBeaconsInRegion(this.ibeacon.BeaconRegion('deskBeacon', '7813eab1-9ee5-447b-b3ee-6179c9b9877a')).then(
        () => this.outputdata = 'Native layer received the request to monitoring'  ,
         error => this.outputerror = 'Native layer failed to begin monitoring: ' + error
        )
  })

  }

  stopBeaconScan() {

  }
}