How to use the cordova plugin bluetoothle in ionic 3?

Question

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

Answer 1

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