how to use plugin in angular/ionic 2 with types?

[joshgarwood]

Hi there! I'm really excited to give this plugin a try, but was wondering if you have an example of how to use it with the types you've created? So for instance, would I import something like this:

import PhotoLibraryCorova from 'cordova-plugin-photo-library'

... I tried this and it didn't seem to work, but I'm pretty sure I'm not doing it correctly, ha.

Thanks for your time!

[viskin]

You doing it completely right for plugin that supports Ionic2. But Ionic 2 is very very new stuff which requires wrapper for each existing plugin. And such wrapper does not exist yet for my young library.

• You can use the plugin directly, without importing. No typescript candies, but this should work. Just window.cordova.plugins.photoLibrary etc.
• If I have time, I'll write a wrapper, which I hope will be accepted by ionic. The library does not have much stars yet, and I don't know is it enough to be accepted there. In theory, there's repository which called ionic-native. This is place where people add wrappers for their libraries, which enables syntax that you want to use (import PhotoLibraryCorova). The wrapper should be something like this:

@Plugin({
  name: 'PhotoLibrary',
  plugin: 'cordova-plugin-photo-library',
  pluginRef: 'cordova.plugins.photoLibrary',
  repo: 'https://github.com/terikon/cordova-plugin-photo-library',
  platforms: ['Android', 'Browser', 'iOS']
})
export class PhotoLibrary{
// blahblah this should not be complex
}

Please try the plugin using window.cordova, and if it will work for your project, I will appreciate an contribution to ionic-native.

I myself cannot give you a promise when I will add such wrapper.

[dnmd]

@joshgarwood did you get things working with Ionic 2? For me it only works after sanitizing URL's, see #15

[viskin]

Working on this. I have working ionic native wrapper. What's left is documenting it and publishing a PR.

[arberkryeziu]

@viskin how can we import the plugin in ionic 2 ?
I tried with
import {PhotoLibrary} from '../../../plugins/cordova-plugin-photo-library/www/PhotoLibrary.js' with no luck...

But I think PhotoLibrary.js is still not complete , right ? Are you following the ionic dev-guideline for the wrapper ?

https://github.com/driftyco/ionic-native/blob/master/DEVELOPER.md

[viskin]

@ArberK The usage will be

  import { PhotoLibrary } from 'ionic-native';

I implemented ionic-native wrapper, and submitted this PR to ionic. You still cannot use the wrapper until PR is approved, I hope this will happen soon.

[arberkryeziu]

Can't I somehow use the plugin in ionic 2 with typescript till the plugin will be included in ionic-native ?

[viskin]

I didn't try this (using plain JS mostly), by this file is TypeScript ds file. As far as I understand, you shouldn't do any import. You should make TS compiler see this d.ts file (from tsconfig?), and then definitions will be attached to cordova.plugins.photoLibrary. In theory.
I use this d.ts file for vscode intellisense. It does work.

[viskin]

Maybe adding this to tsconfig.json will work:

"files": [
  "plugins/cordova-plugin-photo-library/PhotoLibrary.d.ts"
]

[viskin]

Added demo project for ionic2 (not yet approved PR).
https://github.com/terikon/photo-library-demo-ionic2
This includes online demo and permission handling.

[arberkryeziu]

Great work! Thank you...

Can you take a look at this ?
terikon/photo-library-demo-ionic2#1

[viskin]

no-ionic-native branch contains working typescript version that does not require ionic-native.
These are changes needed to make it work.

[arberkryeziu]

Thank you for doing this! Sadly, Im getting a runtime error after the application is started.
Cannot find module 'ionic-native'

(I just downloaded the branch, run on it npm install, and then deployed to my iPhone. )

[viskin]

Oops, ionic-native still should be present in package.json. Fixed this.

[arberkryeziu]

Ok, i did give it a try on my iPhone. Its very unresponsive. At the beginning one can scroll just a litttle, but after 5 sec it becomes unresponsive till it crashes. I can see the lists of photos are created (however, without any photos. Photos somehow are not displayed in my iPhone, I dont know why). However, in the iPhone simulator, where I have ca. 10 photos, it seems to work perfectly fine, also the images are correctly shown.

[viskin]

Well, filling in all the photos to one giant list is not good approach (that's what demo does). Android handles this pretty well, but iOS uses old UIWebView component which is bad. It will be interesting to experiment with new WKWebView which should be more close to Android in terms of performance and reliability. I'll give this a try.
The really correct approach (which we implemented in our app with react) is to show images in visualized list. I could not make ionic's VirtualScroll component work as expected. But I will add react demo later.

[arberkryeziu]

I tried to install WKWebView and used VirtualScroll. It seems to work well, in my simulator. In my iPhone, its responsive and fast also. It does not hang, it does not crach, scrolling is fine. But in my iPhone 5s, I have the problem of images not showing up, its just the list. Can you test this on your iPhone?

I also found this approach http://rintoj.github.io/angular2-virtual-scroll/

Do you think it would be helpfull in our case ?

[viskin]

Cool, I will try both - WKWebView and angular2-virtual-scroll.

[viskin]

angular2-virtual-scroll looks very promising, but I could not make it work with ionic in this branch.

[viskin]

Well, sad to say, but WKWebView still does not provide support for custom schemas. See this issue.
I will open a new issue for this, even though the issue seems to be completely in hands of apache/ionic: #41