Using non ionic cordova plugins properly


#1

So i’ve been able to import plugins from @angular/ and @ionic-native and ionic-native, but i have a plugin i’ve added to my project and i can’t use import statements for it (it fails linting as well as crashes the app). The plugin in question is cordova-plugin-bluetoothle. Now please don’t tell me to just use ‘@ionic-native/ble’ it doesn’t offer all of the functions i need. I need to figure out the process of adding and using plugins that are not ionic-native.

first i tried:

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

I wish it had been so easy as to include it the same way other ionic plugins are accessed. oh to preface i added the plugin using

ionic cordova plugin add cordova-plugin-bluetoothle

And that does in fact download and install the plugin into the plugins folder.
Ok so my code completion (vscode) does infact find the plugin and will autocomplete “cordova-plugin-bluetoothle” while coding the import statement, and while it cc it fails linting. I found that adding

declare module 'cordova-plugin-bluetoothle'

to my declarations.d.ts file in src/ passes linting and autocompleting to the bluetoothele variable’s functions work. But the app still fails. I really thought i had it. so scouring the web i cam across: https://www.javascripttuts.com/ionic-3-and-cordova-native-plugins-installation/
which seemed to be what i wanted. i declared cordova in my declarations file, then in my code i was able to use `

console.log(cordova);
console.log(cordova.plugins);
this.bluetoothle = cordova.require('cordova-plugin-bluetoothle');

cordova seems to be there and for some reason 2 plugins are already loaded (seen from the console.log(cordova.plugins) ) I can’t seem to find where these plugins got loaded (if i could i would probably use the same code to load the ble plugin.)
Problem is the cordova.require throws a “module cordova-plugin-bluetoothle not found” error.
I’m just really confused the proper way to use non core ionic plugins. I’ve tried changing the plugin name in code in case i got it wrong i’ve checked the plugin code to see if it used some other name/id and from what i can tell everything looks good. What am i doing wrong. I’m really in a bind here.

And again, no i can’t use the @ionic-native/ble plugin. Yes it does work for me if i use it, it just doesn’t have all of the functions available in this other cordova plugin, and i need those functions. the ionic-native/ble is very paired down :frowning: in case you need to know the url to to the plugin repo is https://github.com/randdusing/cordova-plugin-bluetoothle

Please someone save me. I’m going to keep hacking away but i’m sure someone knows exactly how to do this. I only pray they watch the forums.


#2

Ok so i did find something.
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

typescript error
Property bluetoothle does not exist on type Window

funny thing is if i console.log(window.bluetoothle) it throws the error but it logs out the object, so it is somehow accessable but still throws the same error. oh and it has the same error linting.

please help :slight_smile:


#3

ok so i made one more step forward which maybe all i need but i would like one more thing.
if i declare bluetoothle in my declarations and then access it directly from the bluetoothle variable i can get access to the plugin.

Only problem now is that my vscode isn’t aware of the type so autocomplete and proper linting are not handled automatically.


#4

That is the way to go.

Interesting, hadn’t thought about that yet. Problem will probably be telling VS Code where to actually get that data from: The plugin lives in /plugins and/or node_modules somewhere probably, but doesn’t have to as Cordova plugins can also be downloaded at build time so are not available at “write code time”.


#5

I think it has to do with my declaration:
declare var bluetoothle: any;
if i can figure out the type as in not “any” then i’m sure ts will be aware of the full object.


#6

Ok i think i made more progress but there has to be a better way to do it. I took the index.d.ts file from the plugin and copied it’s declarations and pasted in my declarations.d.ts file and now everything lints and is aware of the bluetoothle objects functions. it has to be the worst way to do this. but hey it works.


#7

well crap that didn’t work perfectly, now since the plugin and my declarations overlap i get duplicate identifier errors, i have got to find another way to get the plugins declarations imported


#8

Maybe some way to tell VSCode where the original index.d.ts file is?


#9

ok i pulled the code from the declartions.d.ts and now it works for some reason. i had to remove “declare var bluetoothle: any;” and after that bingo i’m good. now i have to fix the actual library seems to be not defining some of the static variables. but that seems like a problem with the plugin. I have no idea why i can to declare it then add the index.d.ts and then remove it all and all of a sudden it works


#10

Not really sure what happened but i have to switch the declare back to

declare var bluetoothle: any;

and once again it works but i no longer get linting and autocomplete in vscode.
if i try to define it like in the index.d.ts

declare var bluetoothle: BluetootlePlugin.Bluetoothle;

it fails saying BluetootlePlugin.Bluetoothle doesn’t exist.
I’m guessing it isn’t getting compiled in before the page gets compiled. Does anyone know how i get that plugin loaded before the page is linted/autocompleted? (and yes that is the correct declaration i thought BluetootlePlugin looked wrong but it is how it is in the types/index.d.ts of the plugin.)

I can work with what i have but it is frustrating not having the code lint or autocomplete. Any Ideas?


#11
interface Window {
    bluetoothle: any;
}

#12

Ok i got it, should it help anyone else adding import to the declartion.d.ts file got me proper lint and auto complete, here is what my declarations.d.ts file looks like.

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

// declare var bluetoothle: any;
// declare var bluetoothle: BluetootlePlugin.Bluetoothle;


#13

Sorry I’m new to ionic and cordova.

I also want to use bluetoothle since it has methods I need.

@dinomight

I created a declarations.d.ts file in my src\ folder and copied the code from your last post in it, what I dont understand is what you have declared in the app.components.ts ?

Whatever I do I always get bluetoothle is not defined.

I tried(<any>window).bluetoothle, bluetoothle and importing like this:
import { bluetoothle } from 'cordova-plugin-bluetoothle';

after adding the declarations.d.ts file.

Could you please tell me what I’m doing wrong ?

Edit: I’m testing natively on android with :
ionic cordova run android --livereload --lc


#14

I tried your approach but did not get it to work, could you look at my post below and tell me what I’m doing wrong ?