CODEWITHSUNDEEP
cordovaionic-frameworkcordova-pluginsionic4ionic-native
diwask
diwask

Reputation: 46

Uncaught TypeError: Object(...) is not a function for Cordova plugin reference

I created a cordova plugin using plugman and am trying to use it in my ionic app. But I am getting Uncaught TypeError: Object(...) is not a function... I am unable to figure out what this error is.

Did some research and found that upgrading ionic-native version might work but it did not in my case.

I am trying to create a wrapper service for the plugin like this:

    import { Injectable } from '@angular/core';
    import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';

    @Plugin({
      pluginName: 'mathcalculator',
      plugin: 'cordova.plugin.mathcalculator',
      pluginRef: 'MathCalculator', 
      repo: 'https://github.com/dkandel/MathCalculator.git', 
      platforms: ['Android']
    })

    @Injectable({
     providedIn: 'root'
    })
    export class MathService extends IonicNativePlugin {

      @Cordova()
      add(args: any): Promise<any> {
       return;
      }
    }

The service has been added to the providers in App module file. I also have the plugin in my plugins folder. When i try to run the app I keep getting Object(...) is not a function and the error points to @Cordova() on my service file.

Can anyone help me out please?

Upvotes: 2

Views: 3380

Answers (2)

Khadija Daruwala
Khadija Daruwala

Reputation: 1205

Not sure if you still need the solution but this worked for me.

import { Injectable } from '@angular/core';
import { cordova, IonicNativePlugin } from '@ionic-native/core';


@Injectable()
export class PluginService extends IonicNativePlugin {
  static pluginName = 'mathcalculator';
  static plugin = 'cordova-plugin-mathcalculator';
  static pluginRef = 'MathCalculator';
  static repo = 'https://github.com/GitUser/Cordova-Plugin-Example.git';
  static platforms = ['iOS']

  add(num1, num2): Promise<any> {
    const x = cordova(this, 'add', {}, [{ param1: num1, param2: num2 }])
    return x;
  }

  substract(num1, num2): Promise<any> {
    const x = cordova(this, 'substract', {}, [{ param1: num1, param2: num2 }])
    return x;
  }

}

Upvotes: 1

jaredro
jaredro

Reputation: 41

I ran into this same issue today and I was making the same mistake as you.

The problem is that you're using the @Plugin and @Cordova decorators directly in an Angular service, which isn't where those decorators are intended to be used. Many of the tutorials I could find on the topic of writing an ionic-native cordova plugin wrapper didn't make this very clear.

The way I resolved the problem was by cloning the ionic-native repo and following these instructions to build the plugin. Building it also creates an ngx directory with another version of the plugin that you should import instead if you want the plugin to operate with Observables instead of Promises.

Once it's built, copy it over to the node_modules/@ionic-native directory of your project. Then you can add it to a module in your project and inject it into a service or component and use it as you use any built-in native plugin.

Upvotes: 3

Related Questions