Clear instructions for using plugins with TS

Ionic Framework ionic-v3
1

Are there any clear instructions for installing and using Plugins in a TypeScript app?

I only get errors like:
Cannot find name cordova or Property ‘plugins’ does not exist on type ‘window’

2

I’ll offer up what I know, though I’m by no means an expert :slight_smile:

first off, installing plugins is best done via the terminal. Most plugins for cordova or phonegap are useable, and will likely have an installation command along the lines of :

‘cordova plugin add cordova-plugin-camera’

you’ll just want to change the first ‘cordova’ (or ‘phonegap’ as the case may be) to ‘ionic’ EX:

‘ionic plugin add cordova-plugin-camera’

Once you have it installed, the most basic way to use the plugin is to place it in the HTML file EX:
(in home.html)
<button (click)="runCordova()">Camera!</button>
(in home.ts)
runCordova(){normal javascript code}

This is the easiest way I know of, with the downside that you will not be able to use external variables (like this.value)

If you need to use typescript or angular 2 abilities (which you likely will), you can check out Ionic Native http://ionicframework.com/docs/v2/native/ which is a bunch of commonly used plugins wrapped up in a way that makes them useable within the typescript.

hope something helps, and if not, that someone else who knows more than me posts :slight_smile:

3

Hi Jeff, unfortunately this is strictly about using plugins with TypeScript and not those found in Ionic Native.
Such as email composer.

I am a little closer however as I now no longer have the cannot find name cordova eror.
I ran npm install -g typings
and then
typings install cordova --save --ambient

Now I think I need to run something like:
typings install cordova/plugins/cordova-plugin-email-composer --save --ambient

This is where information I have found gets really fuzzy.

4

I am speculating here but…

regarding ambient see: http://stackoverflow.com/questions/35953848/what-are-ambient-typings-in-the-typescript-typings-tool

you should not be using ambient because there are typings available for cordova and the email-composer

See: https://github.com/DefinitelyTyped/DefinitelyTyped

1 Like
5

So are you asking about just using regular cordova plugins and typings from TSD/Typings or about using Ionic-Native?

I really suggest using Ionic-Native in this case. This provides not only type information about each plugin, but makes the plugins play nicely with NG2’s zones/change detection. Without this, data may return from your plugin call, but angular may not know about it.

This is a similar issue in ng1 where things would happen outside of $scope. Ionic-native fixes this.

6

Ionic-native is your best shot at plugins as @mhartington said.

But if you need one that is not there and only care about the typing warnings, you could either:

Parse window to any which is a little verbose, but if you save that into another object will only require you to parse it once.

this.pluginObj = (<any>window).plugins.PushbotsPlugin;

Tell Typescript window has extra fields by extending it’s interface, as reported in this stack overflow answer

interface Window { plugins: any; }

window.plugins = window.plugins || {};
7

Sorry, I am not talking about regular cordova plugins. I quickly used the email composer as an example not realizing it was available.

So it sounds like I should use Ionic-Native whenever possible,Typings if not but is available in DefinitelyTyped and the following if the plugin provider does not have a Typed version?
this.pluginObj = (<any>window).plugins.PushbotsPlugin;

Using the above worked for me for a plugin that was neither in Ionic-Native or DefinitelyTyped.
I then used window.plugins.whateverthepluginis.init().
While this worked when I ran it, it still tells me in my editor ( VS Code ) that Property ‘plugins’ does not exist on type ‘Window’.

8

Can you be a bit more explicit about where you put this code? I am struggling to import the datagram cordova plugin in RC0 now that I don’t have a typings folder and an index.d.ts file. Typescript errors. Also, I’ve noticed that for some reason my setup is a bit different that anyone elses – the plugin is not actually found in window.plugins but directly in window. Not sure what’s going on there.

Thanks,
Marc

9

So… I finally got past this issue for plugins that are not in Ionic-Native or DefinitelyTyped. I’m an amateur, so I was finding a lot of the links and advice on this topic to be incredibly confusing (use “npm link”, etc). I get the feeling that I am using a sledgehammer to pound a nail, but I finally got it to work and build on a device.

Below my imports on the .ts file that contains the plugin calls (in my case ‘window.dgram…’ appears in my “page1.ts”), I put the following line:

declare var window: any;

My question to the Ionic team (e.g., @mhartington) is… can there be some way for Ionic to manage the typings of non-native plugins? I.e., for things that are in DefinitelyTyped – Ionic could add the typings automatically, and for those that aren’t, there could be some sort of shim/workaround? I’m finding that as a newbie this was incredibly painful to even discover what the problem was and then hunt down the proper way to fix it (which I’m sure I haven’t gotten to yet – but at least it works).

Anyway, just a thought. I’m a little out of my depths here but trying to learn and stay current as Ionic moves forward…

Thanks,
Marc

10

Aha. And now I see why the above is a bad solution. Wipes out code completion on ‘window’. Yuck.

I noticed that some of my installs with ‘typings’ had added a typings directory similar to the old Ionic 2 beta structure… so I tried adding back in my custom interface:

interface Window {
    plugins: any;
    dgram: any;
    networkinterface: any;
}

But this does not seem to work at all. So why does ‘typings’ put stuff in here?