Ionic typescript project with cordova plugins

[stefanhuber]

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

`

[Tommertom]

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

[pedrocortizo]

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

[Tommertom]

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…

[ManuInNZ]

Hi there

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

Cheers
Manu

[Tommertom]

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

[ManuInNZ]

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

[inksword]

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.

[origin1tech]

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.

[ghprod]

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

[stirumala]

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

[Marco4k]

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’);

[geczy]

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

[SigmundFroyd]

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