Detecting iBeacons on Android/iOS using Ionic 2

Ionic 2 was released on Jan 25 and I wanted to try it out on a simple demo application. Since I’ve recently been experimenting with iBeacons, I decided to make an app that can detect iBeacons that are found within a configurable range.

Ionic is a cross-platform mobile app development framework built on Cordova and AngularJS. Ionic 2 is a pretty big change from the previous version due in part to its use of Angular 2 which itself is a huge change from Angular 1.x.

The demo app I created is very simple, having only two screens as you can see from the screenshots below, but it was enough to give me a chance to create some custom providers as well as to use the built-in Storage provider.

The source code for this demo app is available on GitHub.


  • J says:

    I’m unable to build this project. Please advise. I’m downloaded the demo app, and run npm install. When I attempt to run ionic serve, no www folder is created, the command line reads “Starting server – done!” and nothing happens. Please advise

  • Sean says:

    I have two beacon, but they did’t show up on this app on android. I have run npm install. Did I miss somethings that make it wrong ?

    • Couple things… first make sure bluetooth is enabled on your android. Second, check the UUID that is passed into beaconDetector.start on this line:


      The default UUID is B9407F30-F5F8-466E-AFF9-25556B57FE6D, but I changed my UUID, so it is different. You can try the default and see if that works, or if you changed your UUID then plug in whatever UUID you are using instead of mine.

      More info here:

      • Sean says:

        I have changed UUID to mine, but it still don’t show up any beacon. I have tried those beacons to ionic 1 beacon app. They were shown up, so I sure those beacons were good. I’m not sure about whether ionic 2 has problem in beacon.

  • Murtaza Hamza-Ali says:

    The app is working fine on android device. However, no beacons are detected on an iOS device.

  • Luis says:

    Hey thanks for the code! It works great. I have a newbie angular2 programmer question, on app.component.ts, who calls the constructor and injects the parameters?
    I tried to find who supplies “platform: Platform, settings: Settings, beaconDetector: BeaconDetector” but didnt find anything on your code

  • Rao says:

    Is there any way to detect beacons without setting up UUID. I have seen one app named “Locate” in playstore, which locate beacons without knowing. I think, this concept called as ranging. But I did not get any sample code for detecting unknown beacons.
    Any help?

Leave a Reply

Your email address will not be published. Required fields are marked *