How to use a plain Cordova plugin's API inside an Ionic 3.x project

[Bastion]

Hello, everyone. I’m traditionally a Cordova developer, trying to learn Ionic. Long story short, up to now I’ve only used Ionic Native plugins within my Ionic 3.5.3 project and now I want to use a Cordova plugin and program it using it’s Javascript Cordova API. I’m not exactly sure how this is done or even how to properly phrase this, hence I haven’t been able to find what I need with web searches.

More details: It’s this Google Maps plugin: https://github.com/mapsplugin/cordova-plugin-googlemaps
The developer is writing an Ionic version, but has confessed that it is buggier and has less features than its plain-Cordova counterpart, and I have already used this plugin on a past project, so this is a clear choice on my project if it’s possible.

[Sujan12]

Hm, this exists: https://ionicframework.com/docs/native/google-maps/

But in general:
Find out what Javascript object the functionality is “exported” to (normally this is in the docs, otherwise in “clobbers” in plugin.xml), then just declare that variable at the top of your .ts file so Typescript knows about it. Then use it like you normally would.

Example:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/ lives at cordova.InAppBrowser. So declare var window: any; at the top of the file (below the imports) and then const browser = window.cordova.InAppBrowser.open( ... below as usual to use it.

[Bastion]

@Sujan12

Hm, this exists: https://ionicframework.com/docs/native/google-maps/

Yes, this is the Ionic version of the plugin I linked in the OP. I’ll use it if I have no other alternatives. I’m not sure if this is the one the developer is talking about here: Google Workspace Updates: New community features for Google Chat and an update on Currents

@Sujan12

But in general:

Find out what Javascript object the functionality is “exported” to (normally this is in the docs, otherwise in “clobbers” in plugin.xml), then just declare that variable at the top of your .ts file so Typescript knows about it. Then use it like you normally would.

This is for every class the plugin uses, right? Like GoogleMaps, LatLng, Marker, etc.

Using this documentation and you’re example here is what I think it’ll be:

declare var plugin: any;

… and then

const map = plugin.google.maps.Map.getMap(div);
// map.doSomething();

[Sujan12]

@Bastion

This is for every class the plugin uses, right? Like GoogleMaps, LatLng, Marker, etc.

Using this documentation and you’re example here is what I think it’ll be:

declare var plugin: any;

… and then

const map = plugin.google.maps.Map.getMap(div);
// map.doSomething();

Yes, exactly. You of course don’t have to define a constant and can also directly work with them, but that is the way to go. Just as a normal JS project would use the plugin (so you can copy/paste all the Cordova examples out there). The only additional thing is the declaration of the variable for TypeScript.

[rapropos]

@Bastion

I’ll use it if I have no other alternatives.

I would suggest you prefer it. There are many examples of “somebody reports bug with plugin using Ionic, upstream developer knows nothing about Ionic, blindly blames it on the Ionic integration”. Maybe there is an issue, it gets fixed, but nobody ever goes back and changes the upstream developer’s opinion. Unless you come into an actual concrete problem with ionic-native shims, I think they make apps much more idiomatic and clear. Even if you do come into an actual problem, why not improve overall community code quality and try to help fix it?

[Sujan12]

@rapropos

why not improve overall community code quality and try to help fix it?

That is actually what the original plugin’s author is trying to do right now: GitHub - wf9a5m75/ionic-googlemaps-demo (I think a lot of nuance gets lost in translation from his language to English)

[Bastion]

@Sujan12

Yes, exactly. You of course don’t have to define a constant and can also directly work with them, but that is the way to go. Just as a normal JS project would use the plugin (so you can copy/paste all the Cordova examples out there). The only additional thing is the declaration of the variable for TypeScript.

Okay, I think I understand now. I’m saving the Cordova-specific API for the plugin with the Typescript variable, and because Typescript is a superset of Javascript using it in the file’s body the way I did in my Cordova is valid in Ionic 3

@rapropos

I would suggest you prefer it. There are many examples of “somebody reports bug with plugin using Ionic, upstream developer knows nothing about Ionic, blindly blames it on the Ionic integration”. Maybe there is an issue, it gets fixed, but nobody ever goes back and changes the upstream developer’s opinion. Unless you come into an actual concrete problem with ionic-native shims, I think they make apps much more idiomatic and clear. Even if you do come into an actual problem, why not improve overall community code quality and try to help fix it?

I took a look at the demo the plugin’s developer posted on his repo, and there were build errors. Funny you mention contributing to this repo, the developer said he needed all the help he could get, so I branched off earlier with the intent of sending a PR soon to fix those errors myself

[rapropos]

95% of what ionic-native shims do is convert klunky Cordova callback syntax into easier-to-consume Promise/Observable format, so it’s relatively rare that they introduce bugs in core functionality that isn’t already existent in the plugin. Ordinarily it’s not the situation that there really is a different “Ionic version”.

[Sujan12]

Yeah, that’s the case with this plugin. 2.x development took ages and was done in a “uncommon” way, now it is “done” but there is no full demo application of the vanilla JS usage, so it is unclear how exactly it should work (and waht functionality there is) in the first place.

Really a good place for a contributor and volunteer to jump in and clean up a bit. It’s worth it, this is a super popular plugin (both Cordova and Ionic Native).