WheelSelector ionic-native plugin errors when declaring as provider in @NgModule

Question

I am attempting to include a WheelSelector (Wheel-selector plugin for Ionic Native) in my ionic3 app, however when I try to import and add the WheelSelector to my list of providers in my app.module.ts @NgModule, I receive the error: "Type 'WheelSelectorOriginal' is not assignable to type 'Provider'."

I am trying to follow along to this simple tutorial: https://ionicacademy.com/wheel-picker-ionic/

I have installed the plugin by doing the following in my project folder:

ionic cordova plugin add cordova-wheel-selector-plugin
npm install --save @ionic-native/wheel-selector

Ultimately, I can't get the plugin to work at all.

I have tried importing WheelSelector from both:

 '@ionic-native/wheel-selector' 
 '@ionic-native/wheel-selector/ngx'

If I use the ngx version, I no longer receive the assignment error above, however I get a new runtime error stating Object(...) is not a function.

app.module.ts:

import { WheelSelector } from '@ionic-native/wheel-selector';
...
@NgModule({
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WheelSelector
]

home.ts:

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { WheelSelector } from '@ionic-native/wheel-selector';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  dummyJson = {
    days: [
      {description: 'Mon'},
      {description: 'Tue'},
      {description: 'Wed'},
      {description: 'Thu'},
      {description: 'Fri'},
      {description: 'Sat'},
      {description: 'Sun'}
    ],
    people: [
      {description: 'Joe'},
      {description: 'John'},
      {description: 'Max'}
    ]
  };

constructor(public navCtrl: NavController, 
private toastCtrl: ToastController, private selector: WheelSelector) {}

openPicker(){
    this.selector.show({
      title: 'select your contact',
      positiveButtonText: 'yes',
      negativeButtonText: 'no',
        items:[
         this.dummyJson.days,
         this.dummyJson.people
      ],
        defaultItems: [
         {index:0, value: this.dummyJson.days[4].description},
         {index:1, value: this.dummyJson.people[1].description},
      ]

   }).then(result=>{
     let msg = 'woo';

     let toast = this.toastCtrl.create({
       message: msg,
       duration: 4000
     });
     toast.present();

    });
  } 
 }

Any help where I'm going wrong would be appreciated! Thanks!

RobbieInOz RobbieInOz · Accepted Answer · 2019-01-28T01:42:26

Solved:

There were a couple problems:

I believe past Ionic 2 now the import for ionic-native plugins must come from the ngx folder. Changed this in both the app.module.ts file and the home.ts file. This takes care of the provider assignment issue.

import { WheelSelector } from '@ionic-native/wheel-selector'/ngx;

Next, in my package.json file, I upgraded ALL @ionic-native dependencies to: "5.0.0-beta.15". So:

"@ionic-native/core": "5.0.0-beta.15",
"@ionic-native/splash-screen": "5.0.0-beta.15",
"@ionic-native/status-bar": "5.0.0-beta.15",
"@ionic-native/wheel-selector": "5.0.0-beta.15",

Then:

npm install

App runs fine now without errors - still can't get the wheelselector to display but I think that's possibly because I'm testing on a browser rather than device...

WheelSelector ionic-native plugin errors when declaring as provider in @NgModule

1 Answers