Confused using plugins with/without ionic-native


#1

Hi,

Using the Transfer plugin, but getting some issues like,

  1. TransferObject : No Export found for this in plugin definition.

  2. this.tranfer.create(): does not exists on type Transfer.

One more query, for some plugins we don’t need to declare any provider, and for some of them we need to give providers in app module also. Can anyone explain me this please?

Thanks in advance.


#2

When using Ionic Native 3.x you should always provide the plugin in your app.module. Also in Ionic Native 3.x the plugins are separated from each other, which makes it possible to separately import them into your app instead of the entire ionic native bundle while you’re only using 1 plugin.

Regarding your issue, which version of ionic native and plugins are you using? Could you please post the contents of your package.json over here?


#3

This is the content of my package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  },
  "description": "etgcomplete: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

Plz also explain, why we have different folder for ionic-native.(ionic-native and @ionic-native) ?


#4

What do you mean by different folders? Did you do an upgrade of ionic-native by any chance? Regarding your OP, you’re transfer plugin is nowhere to be found in your package.json contents. Did you run both these commands?

ionic plugin add --save cordova-plugin-file-transfer
npm install --save @ionic-native/transfer


#5

Initially when I set up my code, there is a folder ‘@ionic-native’ in node-modules with just three plugins namely (core, splash screen and status bar). Also inside the node-modules there is another directory named ‘ionic-native’ without ‘@’.
Plz explain, am i going right?

Directory structure of @ionic-native directory,

@ionic-native
|
|----------core
|
|----------splash-screen
|
|----------status-bar

Directory structure of ionic-native directory,

ionic-native
|
|----------dist
|
|----------node-modules
|
|----------changelog(file)
|
|----------license(file)
|
|----------package(file)
|
|----------readme(file)

The structure of both directories is different. What are these two different directories for ?

Right now, i was just using the first command. Using the second command will install transfer plugin inside @ionic-native. But what about file transfer plugin already defined in ‘node-modules/ionic-native/dist/es5/plugins/filetransfer.js’

Thanks.


#6

If you think there’s some mistake inside your node_modules folder, you should clear it out. Just throw it out of the window and reinstall using npm install.

In my project I don’t have two folders with ionic-native, so I think that shouldn’t be there. Just @ionic-native, which contains all the plugins that come preinstalled (statusbar and splash etc). After installing a new plugin through ionic plugin add you should definitely also install the corresponding package, since it contains typings. If you install those, I’m pretty sure those errors should vanish.

If you’re not sure about why you have two folders, start with removing your node_modules. Then run npm install in your folder and all the correct packages are added back into your node_modules. After that, add the plugin with these two commands:

ionic plugin add --save cordova-plugin-file-transfer
npm install --save @ionic-native/transfer


#7

Ok thanks, will check that out.

One more thing, for all the plugin I have used till now, I used only the first command, but all plugins are just working fine.

Plz check this also,

import { NativeStorage } from 'ionic-native';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
    
    constructor(public navCtrl: NavController, private storage: NativeStorage) {
        this.saveData();
    }

    saveData() {

        // This is showing error setItem() does not exists on type NativeStorage.
        this.storage.setItem('dataVar', "data").then(
            () => {
                console.info(">>> Expire Date Added...>>>");
            },
            (error) => {
                console.log("Error Adding Expire Date...> "+ error);
            }
        );

        //This one is working just fine.        
        NativeStorage.setItem('dataVar', "data").then(
            () => {
                console.info(">>> Data Added...>>>");
            },
            (error) => {
                console.log("Error Adding Data...> "+ error);
            }
        );
    }
}

Can you please explain, why this is happening?
Thanks.


#8

Because when you switch to Ionic Native 3.x, all packages come in separately and not bundled. So you need to import them one by one, as documented in the documentation of Ionic Native. the code you provided was for Ionic native 2. If you’ve moved up to Ionic native 3.x , you should read about the changes in the blog over here:

http://blog.ionic.io/ionic-native-3-x/

I.e., rewrite your imports as well. this:import { NativeStorage } from 'ionic-native';
isn’t going to work anymore, please check out the documentation over here for that specific plugin (and all other ones, because this is the new way of doing it)


#9

The code you posted here is from an older version of ionic-native. This will not work with current versions of Ionic Native, also I am wondering why this is working at all as your package.json doesn’t contain the ionic-native package (as it should be).

I suggest you delete your node_modules directory, run npm install and then fix the stuff that will be broken.


#10

Thank you so much. got my doubt cleared.