Ionic typescript project with cordova plugins

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

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.

Hi @mattarod,

No problem.

Regards
Tom

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

  • 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)

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(); 
    }

This works for me:
`

import {Page} from 'ionic-framework/ionic';

declare var Media:any;

@Page({
    templateUrl: 'build/pages/settings/offline.html',
})
export class TestPage {
    constructor() {
        let media = new Media('someurl');
        media.play();
    }
}

`

1 Like

Hi

working on small project to play with the plugins (PluginParty) as seen in all these postings.

Not all plugins are working, but working towards that goal. And other issues remain (INPUT box e.g.).

https://github.com/Tommertom/ionic2pluginparty

Regards

Tom

Hi @Tommertom, i’m getting errors when i’m trying to build your PluginParty App…

It works with the “Ionic View” app?

Can you post a simple step-by-step guide to get it working propertly?

Thx. Greetings from Spain

Hi @pedrocortizo

Sorry for the issue. I forgot to upload a few typings (due to .gitignore).

Ionic View: https://apps.ionic.io/app/e965400f

Got it on Ionic View (after plugin add script) using:
ionic add ionic-platform-web-client (gave error on not finding app.js in www/js)
ionic io init
ionic upload

If you have suggestions to improve the app, let me know. I am learning here.

Regards

Tom

edit: removed installation instruction, as it doesnt work… Ionic View app should work…

Hi there

Just getting 404s when trying to access the ionic view.
Any issues with app or just a dumb user (me :grin:)

Cheers
Manu

hi @ManuInNZ

My bad. Had it deleted from the repository. Uploaded again. As mentioned, not all plugins work fine, but the basic ones (vibration, device, status, etc.) are.

Regards

Tom

Hi @Tommertom

Seems like the app is still not going. I pulled again your repo and will give it a go locally.
Many thanks anyway for sharing. Typescript, although it brings some constraints, is the way to go and your Cordova plugins integration demo just fix the missing link until they get somehow integrated in ionic-native I presume.

I still try to wrap my head around why should we not try to inject them(the required cordova plugins) as providers basically. Probably a dummy question I guess.

Cheers
Manu

1 Like

I have the same problem and get it fixed with typings, since tsd is deprecated.

DEPRECATED: TSD is deprecated, please use Typings and see this issue for more information.

The key is to use:

$ typings install cordova --ambient --save
$ typings install cordova/plugins/statusbar --ambient --save

Please reference my other post in this forum for detail.

With typings, I don’t need to reference /// <reference path="Cordova.d.ts"/> on the top of *.ts files. The transpile won’t give any errors, and I got the nice intellisence with Visual Code as well.

I am using the latest ionic 2 and cordova 6.x.

4 Likes

This is the correct answer moving forward with “typings” over “tsd”. TSD ultimately will become typings in a sense to prevent need of single repo location and allow typings to be resolved and installed from anywhere. Just a quick FYI.

Just as posted install cordova first then cordova/plugins/YOUR_PLUGIN. this is because you prob. don’t need all plugin definitions installed but rather those you’re using. Upon install “cordova” first you will notice that it strips the individual plugin defs.

instead using navigator.splashscreen.hide(), i use Splashscreen.hide() from Ionic Native :thumbsup:

I get the following error when i run this command typings install cordova --global --save

did I miss something

typings ERR! message Unable to find “cordova” (“npm”) in the registry.
typings ERR! message However, we found “cordova” for 1 other source: "dt"
typings ERR! message You can install these using the “source” option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/cordova/versions/latest responded with 404, expected it to equal 200

typings ERR! system Windows_NT 6.1.7601
typings ERR! command “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\typings\dist\bin.js” “insta
cordova” “–global” "–save"
typings ERR! node -v v6.3.1
typings ERR! typings -v 1.3.2

typings ERR! If you need help, you may report this error at:
typings ERR! https://github.com/typings/typings/issues

this actually allowed me to serve the app. I commented out my initial code and added the var below it

\\window[‘cordova’].InAppBrowser.open(${link}, ‘_blank’, ‘location=yes’);
var ref = window.open(’${link}’, ‘_blank’, ‘location=yes’);

1 Like

Updated as of October 2017:

First of all, make sure statusbar is installed through NPM
npm install --save @ionic-native/status-bar
If that didn’t fix it, then continue reading

Then, the typings solution:

typings install dt~cordova --global --save
typings install dt~cordova-plugin-statusbar --global --save

If that didn’t fix it, then continue reading

Because typings IS deprecated, make sure to use and install @types
npm install @types--save-dev

Then, install @types for statusbar
npm install @types/cordova-plugin-statusbar --save-dev

That should solve the problem

If you’re using a recent ionic-native there shouldn’t be a need to install typings, it’ll come with ionic native.