How to use the cordova plugin bluetoothle in ionic 3?

cordova-plugin-bluetoothle tutorial
cordova plugin-bluetoothle example
ionic 3 bluetooth example
ionic 4 ble example
ionic-native/bluetooth-le ngx
cordova-plugin-ble-central scan
ionic cordova plugin add cordova plugin bluetoothle
bluetoothle isconnected

Additional information:

I know the usual way to access cordova plugins:

(<any>window).plugins.myPlugin 

or

declare var yourGloballyAccessablePlugin: any;

but it's different with the plugin bluetoothle (the native bluetooth plugins supported by ionic 3 are not good enough as they do not provide bluetooth peripherial functionality e.g. advertising)

Solution attempt:

I found a related question on the ionic forums and asked how they achieved this, so far I faild to replicate the process and no one answered my question so far, thats why this question was opened.

Apparently bluetoothle exposes a globally accessible variable.

As stated there I added a declaration.d.ts file to my src folder with the following content:

declare module 'cordova-plugin-bluetoothle';
import 'cordova-plugin-bluetoothle';
declare var cordova: any;

I then tried to access the plugin (tested it on my phone) like this:

import { bluetoothle } from 'cordova-plugin-bluetoothle';

...

(<any>window).bluetoothle

Problem:

But bluetoothle is always undefined for me. Since I'm new to cordova, ionic and TypeScript I guess that there is something wrong with the way I'm using declarations.d.ts

So does someone know what I'm doing wrong, how can I use the cordova native plugin bluetoothle in ionic 3?

UPDATE, Solution attempt 2:

So I tried to run this code within the initial project structures app.component.ts as recommended by @Webruster with the init params from the bluetoothle documentation:

(the only goal here is to see whether the plugin works)

imports...

declare var cordova: any;

@Component, class start and attributes...

  constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      console.log("I'm ready");
      // your bluetothle methods can be accessed after
      //cordova.plugins.bluetoothle
      // for brevity i added a sample method from repo , it can be changed
      //based on your need
      let initializeResult: object;
      let params: object = {
        "request": true,
        "statusReceiver": false,
        "restoreKey": "bluetoothleplugin"
      };
      cordova.plugins.bluetoothle.initialize(initializeResult, params);

      console.log(JSON.stringify(initializeResult));

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

but this way the app does not even load, it just times out and outputs the connection to the server was unsuccessful when I run the app without the plugin code it works.

UPDATE 2:

I debugged the app with chrome (the previous error was caused by the --livereload option for an unkown reason) and this is the error I get:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'initialize' of undefined
TypeError: Cannot read property 'initialize' of undefined

checking the types of cordova, cordova.plugins and cordova.plugins.bluetoothle with:

  console.log(typeof cordova);
  console.log(typeof cordova.plugins);
  console.log(typeof cordova.plugins.bluetoothle);

I get the following results:

object
object
undefined

Just like the normal way , you can install it with:

ionic plugin add cordova-plugin-bluetoothle

after this include below line after your imports statement as follows:

declare var cordova:any;

And use it when the platform is ready:

platform.ready().then(
    () => {
        console.log("I'm ready");
        // your bluetothle methods can be accessed after 
        //cordova.plugins.bluetoothle
        // for brevity i added a sample method from repo , it can be changed 
        //based on your need
        cordova.plugins.bluetoothle.initialize(initializeResult, params);
    }
);

somq/ionic-plugin-bluetoothle: Ionic Native plugin wrapper , It works with ionic 3 & ionic 4! Table of Contents. Install. Install. npm: Install from scratch. ionic start ionic-bluetoothle blank cd ionic-bluetoothle npm install ionic-plugin-bluetoothle --save ionic cordova plugin add cordova-plugin-bluetoothle. Usage. app.module.ts. Troubleshoot. Development. Original doc. startScan Scan for Bluetooth LE devices. Since scanning is expensive, stop as soon as possible. The Cordova app should use a timer to limit the scan interval. Android API >= 23 requires ACCESS_COARSE_LOCATION permissions to find unpaired devices. Permissions can be requested by using the hasPermission and requestPermission functions.

First install the plugin (ionic3):

ionic cordova plugin add cordova-plugin-bluetoothle

Then use (<any>window).bluetoothle when the platform is ready to access the plugin insted of the usual location (cordova.plugins) based on @dinomight post on the ionic forum :

the window object seems to be loading the bluetoothle module. if i console.log(window) i can see it right there with all of its functions. problem is if i try to reference it via "window.bluetoothle" i get a new error

Here is the test code (only the constructor because I did not modify anything else) which prompts you to activate bluetooth (only supported on android) and and activates it after allowing it to do so (the code is located in the component.app.ts of the extended ionic3 starter app):

  constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
    platform.ready().then(() => {

      let initializeResult: object;
      let params: object = {
        "request": true,
        "statusReceiver": false,
        "restoreKey": "bluetoothleplugin"
      };

      (<any>window).bluetoothle.initialize(initializeResult, params);

      let enableSuccess: object;
      let enableError: object;

      (<any>window).bluetoothle.enable(enableSuccess, enableError);

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

Testenvironment:

I tested this on Android 7.1.1 (lineageOS) on my Nexus 5

BluetoothLE, It's a wrap around randdusing/cordova-plugin-bluetoothle cordova plugin for Ionic. It supports Usage. import { BluetoothLE } from '@ionic-native/bluetooth-le'​;  GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together. TypeScript 96.8% JavaScript 2.3% Use Git or checkout with SVN using the web URL. Downloading

There is a wrapper for this plugin you can use here: https://github.com/somq/ionic-plugin-bluetoothle.

However, while this is a great way to use the plugin, it doesn't wrap all the methods and therefore didn't work for what I needed. If it has the methods you need then I recommend using it.

My main recommendation is to use (<any>window).bluetoothle.{method name} as described by a previous poster. Of all the techniques described here, that is the only one that worked for me.

I hope that helps anyone reading this thread.

BluetoothLE, Use the Bluetooth Low Energy plugin to connect your Cordova app to new Bluetooth devices like heart rate monitors, thermometers, etc Ionic Native plugin wrapper for cordova-plugin-bluetoothle ️ 🎉 bluetooth-le has been added to ionic plugin repository . Documentation can be found @ ionic native doc .

Add this line at the top of every page where you wish to use the plugin to get rid of IDE errors:

declare var bluetoothle: any;

cordova-plugin-bluetoothle, Ionic Native plugin wrapper for cordova-plugin-bluetoothle. 0.0.3 • Public • Published 2 years ago. Readme · ExploreBETA · 0Dependencies · 0Dependents​  In this tutorial, we are going to install an Ionic 3 and a Cordova plugin. Cordova revolutionized mobile development. It allowed us to code in HTML5, JS and CSS with access to a device's feature. Ionic uses this technology in order to access those features.

After more time working on this, I have found there are 4 ways to do this (improving on my earlier answer):

  1. Use the plugin wrapper here if you don't need every plugin method wrapped (many are missing): https://github.com/somq/ionic-plugin-bluetoothle

  2. Use (<any>window).bluetoothle.{method name}({arguments}); anywhere in your code. This works great, but crashes Ionic View.

  3. Use declare var bluetoothle; at the top of your file, and then you can get to the plugin via: bluetoothle.{method name}({arguments});. Works great, but also crashes Ionic View.

  4. Copy the existing wrapper plugin, and add it to your own source code as a provider, then just wrap the remaining methods that you need to use. The file to copy is here: https://github.com/somq/ionic-plugin-bluetoothle/blob/master/src/%40ionic-native/plugins/bluetooth-le/index.ts. A guide on how to wrap a plugin is here: http://www.damirscorner.com/blog/posts/20170908-WritingAnIonicNativeWrapper.html

4 is the cleanest solution if like me you need more methods wrapped than somq has completed in his project. This method will stop Ionic View from crashing, but turns out the plug-in isn't supported anyway, so you still can't use it in Ionic View.

ionic-plugin-bluetoothle, If not, check out this tutorial on Building a Simple App Using Ionic, an Advanced App Framework. In this tutorial, the peripheral I'm going to use is a Raspberry Pi 3. Add the Bluetooth Low Energy Central Plugin for Cordova. You can use noble and the bluetooth LE cordova plugin to implement this. Browse other questions tagged ionic-framework bluetooth-lowenergy cordova-plugins phonegap-plugins or ask your own question. Blog Last minute gift ideas for the programmer in your life

Communicating with Bluetooth Low Energy Devices in Cordova , ionic cordova plugin add cordova-plugin-bluetoothle $ npm install Usage Documentation. Plugin Repo: 3 months ago; 5.18.1-beta.5 . I try your plugin with the iPhone simulator and on my hardware with the ionic view app. With the simulator it says, that no bluetooth is possible. But with the hardware iPhone and the ionic view app the bluetoothle variable is undefined. I updated all plugins, cordova and ionic, include many times the plugin and use your example program.

Package, Created 3 years ago in randdusing/cordova-plugin-bluetoothle with 5 comments. Ionic 2 is almost in production and I was wondering if you are considering creating a wrapper to be use with Ionic Native? can't find BLE devices using scan. The BluetoothLE plugin uses an adapter to interact with each device's Bluetooth LE capability so you'll have to initialize it. To do that, call the initialize function. document . addEventListener ( ' deviceready ' , function () { new Promise ( function ( resolve ) { bluetoothle . initialize (resolve, { request : true , statusReceiver : false }); }). then (initializeSuccess, handleError); });

BluetoothLE, How do I respond to a read or write request using cordova-plugin-bluetoothle? - ionic3. @KunalBalani Yes, I know that I have to use plugin in order to communicate with hardware and that is exactly what I'm doing in Android case - I'm using BluetoothSerial. My question is if this is possible on iOS (100% native application or plugin for Cordova).

Comments
  • To clarify, I do not necessarily need to port the application (which I developed for my student project) to smartphones but since I can reuse most of my code (because it's written with angular 5) this would be a nice to have extention
  • there are couple of questions , 1. where is ur initialization code for the ionic ? where are you calling this method ? in app.component.ts ?
  • I used the default starter app from Ionic 3 and tried to access the plugin as soon as the platform is ready e.g. injecting the Platform in the constructor and then accessing it in the constructor like this: this.platform.isReady().then((params) => { ... accessing plugin here }. Yes I mean the app.component.ts component.
  • Could someone tell me why my question is considered not useful or poorly researched?
  • dont mind about response .. +1 for updating the process attempt
  • did you test it ? I thought I tried that(as described in my comment under my question), I will test it later and report back.
  • @MADforFUNandHappy i usually run plugins like this which are not in ionic native , the one you implemented were using MODULAR model , so this is in a bit of javascript approach
  • I had to use ionic cordova plugin add cordova-plugin-bluetoothle since I'm using ionic3, I tried you example and added the init params but I just get an black screen when the app loads on my nexus 5 ... I will add the code to my question, maybe I did something wrong.
  • I try to debug it, didn't know that I could to this with chrome
  • @MADforFUNandHappy try to get the console log for it
  • its the same as the one i defined , instead of cordova, you have defined the windows object with type any. any way glab it helped you
  • I know, i gave you the bounty since I got what I wanted
  • I think this is a misunderstanding, I'm referring to the Cordova plugin bluetoothle which provides the possibility to use the Bluetooth adapter as central and peripheral. The Bluetooth plugin provided by ionic native does only support Bluetooth central functionality.
  • Take a look at the link of bluetoothle in my question, its another plugin which is not supported by ionic native and cant be used the usual way in which cordova plugins can be made accessible in ionic native.