Ionic typescript project with cordova plugins

Ionic Framework ionic-v3
1

Hi,
anyone knows what I must do to make cordova plugins work on my ionic2 typescript project?

Following these steps…

ionic start myproject blank --v2 --ts

ionic platform add ios

ionic build

ionic serve

then, in my app.ts, inside platform ready function i try to set light style to StatusBar:

if(StatusBar) StatusBar.setStyle(StatusBar.LIGHT_CONTENT);

In my google chrome console appears this error (that’s normal because i don’t have cordova on browser):

EXCEPTION: ReferenceError: StatusBar is not defined

and in Terminal i can see this another error:

Cannot find name ‘StatusBar’.

Same happens with all of my plugins. If I try to hide splashscreen, in my terminal appears:

Property ‘splashscreen’ does not exist on type ‘Navigator’.

and if I use splashscreen plugin, for example, 5 times, this error appears 5 times too.

For debugging I use Google Chrome browser and ionic serve.
What I really want is to avoid the errors displayed on the terminal, because when I use 10 plugins 20 times (for example) I will see 200 errors every time I make a change on my .‘ts’ files. :astonished:

image
image894×726 161 KB

My system information:

Cordova CLI: 6.0.0
Gulp version: CLI version 1.2.0
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-alpha.57
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.2.6
Xcode version: Xcode 7.2.1 Build version 7C1002

ionic plugin ls:

cordova-plugin-console 1.0.2 “Console”
cordova-plugin-device 1.1.1 “Device”
cordova-plugin-network-information 1.2.0 “Network Information”
cordova-plugin-splashscreen 3.1.0 “Splashscreen”
cordova-plugin-statusbar 2.1.1 “StatusBar”
cordova-plugin-whitelist 1.2.1 “Whitelist”
ionic-plugin-keyboard 1.0.8 “Keyboard”

ionic platform ls

Installed platforms: ios 4.0.1

PD: Sorry for my bad english. :pensive:

Thanks in advance!

2

I have the same problem… This is horrible with typescript, who needs this crap anyway. Somewho the typings need to be integrated. I searched for some time already, couldn’t find a solution.

1 Like
3

ok I found an easy solution…

declare var Media:any;

This allows me to use the cordova-media-plugin without the errors you described…

5

Hi

I’ve used the Typescript definitions as published on https://github.com/DefinitelyTyped/DefinitelyTyped. Great stuff there.

For emailing I had to use the typings for cordova and cordova email plugin (cordova-plugin-email-composer). In the *.ts file you need to reference to the typings so the transpiler includes them (/// <reference path="Cordova.d.ts"/>), besides including the typings for the plugin if they are not in the default list. Some of the default plugins have typings as part of the cordova.d.ts (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova). Default it includes:

/// <reference path="plugins/BatteryStatus.d.ts"/>
/// <reference path="plugins/Camera.d.ts"/>
/// <reference path="plugins/Contacts.d.ts"/>
/// <reference path="plugins/Device.d.ts"/>
/// <reference path="plugins/DeviceMotion.d.ts"/>
/// <reference path="plugins/DeviceOrientation.d.ts"/>
/// <reference path="plugins/Dialogs.d.ts"/>
/// <reference path="plugins/FileSystem.d.ts"/>
/// <reference path="plugins/FileTransfer.d.ts"/>
/// <reference path="plugins/Globalization.d.ts"/>
/// <reference path="plugins/InAppBrowser.d.ts"/>
/// <reference path="plugins/Media.d.ts"/>
/// <reference path="plugins/MediaCapture.d.ts"/>
/// <reference path="plugins/NetworkInformation.d.ts"/>
/// <reference path="plugins/Push.d.ts"/>
/// <reference path="plugins/Splashscreen.d.ts"/>
/// <reference path="plugins/StatusBar.d.ts"/>
/// <reference path="plugins/Vibration.d.ts"/>
/// <reference path="plugins/WebSQL.d.ts"/>
/// <reference path="plugins/Keyboard.d.ts"/>

For the emailer plugin, I took a bit of a crude approach and just included the interface definitions in the ts file of the starter template.

Also got it to work with the camera in Ionic2 TS.

Hope it will work for you.

Regards,

Tom

2 Likes
6

Thanks @Tommertom !

It works like a charm. :+1:

7

Great!

Btw, I didnt get the DeviceOrientation plugin to work. Whenever I tilt my laptop screen the orientation stays landscape :blush:

(just kidding:some cordova plugins dont work on ionic serve as you may have noticed)

Regards

Tom

8

I’m trying to implement your solution @Tommertom without any luck. I am very new to Ionic2, so I really appreciate your help! I am using InAppBrowser.

I added the Typescript definitions to my app using
tsd init
tsd install cordova --save

I’ve tried adding a reference to the page’s .ts file such as

/// <reference path="../typings/tsd.d.ts"/>

No matter what I try, I still get the following errors when I run my app for android

ERROR in [default] /Users/daphnegold/Google Drive/Ada Developers Academy/K-Bop/k-bop/app/pages/login/login.ts:27:22
Property 'code' does not exist on type '{}'.

ERROR in [default] /Users/daphnegold/Google Drive/Ada Developers Academy/K-Bop/k-bop/app/pages/login/login.ts:36:38
Property 'InAppBrowser' does not exist on type 'Cordova'.

ERROR in [default] /Users/daphnegold/Google Drive/Ada Developers Academy/K-Bop/k-bop/node_modules/ionic-framework/animations/animation.d.ts:48:50
A 'this' type is available only in a non-static member of a class or interface.

ERROR in [default] /Users/daphnegold/Google Drive/Ada Developers Academy/K-Bop/k-bop/node_modules/ionic-framework/animations/animation.d.ts:54:50
A 'this' type is available only in a non-static member of a class or interface.

Additionally, Atom (my editor) is quite upset and complaining that Property 'InAppBrowser' does not exist on type 'Cordova' along with several other things related to Typescript definitions. On the bright side it will run and everything seems to be in working order despite this!

9

Hi

I have no experience with that specific plugin, but looking at the code of the plugin I would do the following to try it out:

install a starter app (ionic start testapp --v2 --ts) and cd into the dir
add the plugin (cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git)
add platform (ionic platform add android). I saw someone do a ionic prepare android. Not sure if that is needed for cordova plugins.

add a button to the html with an (click) reference to page 1

<button (click)="doStuff()" class="button button-icon icon ion-email">
Do stuff
</button>

assure the cordova (including plugins - https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/cordova) typings are in the app folder

include the typings to page1.ts (/// <reference path="cordova.d.ts"/>) - with the directory reference of course correct

include a doStuff() method to @Page page1.ts to do some sample stuff using the plugin such as

doStuff() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
console.log('done stuff', ref);
}

And then see what happens in the emulator and the console log (through chrome link)… And test from thereon how to get it to work or extend…

Regards

Tom

10

@ramon did you get the inAppBrowser plug-in to work? I’m having trouble in my Ionic 2 / Typescript project.

11

Sorry @richardshergold, I’m currently not using this plugin on my ionic v2 project but StatusBar plugin is working fine thanks to @Tommertom reply.

12

Hi @richardshergold,

I managed to get it working in Ionic2 TS project as per my description above (create new starter project).

Interestingly, the plugin isnt reachable through cordova.InAppBrowser.open, but through window.open

The method doStuff() as per description which works for me:
doStuff() {

		// var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes'); <--- does not work
		console.log('Opening');
		var ref = window.open('http://apache.org', '_blank', 'location=yes');

		//console.log('Closing - how silly');
		//ref.close();  // uncomment to see the window opened and closed 

		// other methods:
		// ref.addEventListener( etc.. 
	}

So, I am not sure how to help further. Maybe try to setup yourself? I am using Ionic2 on Ubuntu.

Regards

Tom

image
Screenshot - 23-02-16 - 13:23:38.png1366×768 125 KB

1 Like
13

Thanks @Tommertom I had just got there myself thanks to your other reply on this thread :slight_smile:

14

Thank you for the detailed response @Tommertom. I tried what you suggested and unfortunately I’m still getting Typescript errors related to Cordova. But I have just put that issue aside for a while since it doesn’t seem to affect my build. :smiley:

15

That very likely means the plugin hasn’t loaded at all.

window.open() is a function that already exists before you load the InAppBrowser function. The InAppBrowser plugin replaces it with its own version of it that has extended functionality.

You can test if the plugin has loaded by testing the type of the object returned by window.open(). If it’s InAppBrowser, everything’s fine. If it’s Window, the plugin has not loaded, and you’re using the default version of the method.

I followed the steps you laid out in your other post exactly, and when I check the type of the returned object, it’s Window. Your solution does not work.

EDIT: Misinformation struck through.

16

Hi @mattarod,

Sounds true and I wondered this myself earlier. So I tried the solution with the plugin removed which did not result in a default window.open action (nothing happened).

Just now I tried adding an event listener according to the plugin specs, which I hope isn’t a default method for the traditional Window object. And this fires properly.

function callback() { console.log('callback fired'); }
ref.addEventListener('loadstart', callback);

Anyway, no explanation for your observation or can it be that the typing says interface InAppBrowser extends Window?

I am no expert on TypeScript and plugins. And have observed similar clobber behaviour on the email plugin.

Regards

Tom

17

Yes, you’re right, the plugin is loading after all. It is difficult to tell the difference in a browser session using ionic serve, but it is apparent on my actual device. I can use InAppBrowser this way. Sorry for the confusion. I’ve removed the misinformation from my above post.

The fact that you cannot call cordova.InAppBrowser is a bug, but one that a developer can work around with little difficulty.

However, there is still a problem. There are other plugins that suffer from the same bug, and cannot be worked around this way because they don’t override default methods. The one I am struggling with now is NativeAudio. window.plugins doesn’t exist at runtime, so I cannot call window.plugins.NativeAudio.

I added a NativeAudio.d.ts file for it, and I am confident I did it correctly. There are no type errors at compile time.

The plugin works fine in Ionic 1, and other plugins such as InAppBrowser show the same defect, so I believe this is an Ionic 2 bug, not a bug with the plugin.

18

Hi @mattarod,

No problem.

Regards
Tom

19

How did you import the the media plugin? How did you get access to it? Like: import {Media} form 'somepath'?

20
  • ionic plugin add cordova-plugin-media
  • declare var Media:any; in the ts file you want to use it

No import or any hassling with the definition files is necessary. However, the downside, that you don’t have autocompletion within your IDE, and of course compile time checks for strict typing…

Be aware the media plugin has some issues with getting durations of sound files (always returning -1). I used the Audio Web API directly, which is amazing!!! (https://issues.apache.org/jira/browse/CB-6427)

21

I tried what you outlined here, but I just get compile and JS runtime errors because the Media type doesn’t exist. I tried it with a method connected to a click button event, but Media simply doesn’t exist as far as the framework is concerned. Here’s the code I used:

testAudio() {
        let media: any;
        media = new Media("testaudio.mp3');
        media.play(); 
    }