Ionic 4 Cordova Custom Plugin using Ionic-Native

Ionic Native
1

Hi guys! I’m trying to integrate a Ionic Cordova Custom Plugin and I’m stuck as to how to get started with v4. Currently, I’'m migrating an old plugin from a previous developer and right now, I wan’t to use it in v4 but it doesn’t seem to work. I was reading the Ionic Native but then I can’t seem to make it work and I’m really stuck.

I followed this docs but stil lim stuck

Ionic:

   Ionic CLI                     : 5.4.13 (C:\Users\asdf\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\asdf\AppData\Local\Android\Sdk)
   NodeJS            : v12.14.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

Here’s my folder structure:

ionic-native
    - dist
    - src
       -  @ionic-native/plugins/math-calculator
Index.ts:
@Plugin({
  pluginName: 'mathcalculator',
  plugin: 'cordova-plugin-mathcalculator', // npm package name, example: cordova-plugin-camera
  pluginRef: 'MathCalculator', // the variable reference to call the plugin, example: navigator.geolocation
  repo: './MathCalculator', // the github repository URL for the plugin
  platforms: ['Android'] // Array of platforms supported, example: ['Android', 'iOS']
})
@Injectable()
export class MathCalculator extends IonicNativePlugin {
  @Cordova()
  add(arg1: any): Promise<any> {
    return; // We add return; here to avoid any IDE / Compiler errors
  }
}

MathCalculator (Plugin)
    - src / android
        - .java File

Plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-mathcalculator" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
  <name>MathCalculator</name>

  <js-module name="MathCalculator" src="www/MathCalculator.js">
    <clobbers target="cordova.plugins.MathCalculator" />
  </js-module>

  <platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
      <feature name="MathCalculator">
        <param name="android-package" value="cordova-plugin-mathcalculator.MathCalculator" />
      </feature>
    </config-file>

    <config-file parent="/*" target="AndroidManifest.xml">
    </config-file>  
    <source-file src="src/android/MathCalculator.java" target-dir="src/cordova-plugin-mathcalculator/MathCalculator" />
  </platform>
</plugin>

Home.page.ts
import { MathCalculator } from '@ionic-native/math-calculator/ngx';
export class HomePage {
  param1: number = 3
  param2: number = 2
  constructor(
    private math: MathCalculator,
    private platform: Platform
  ) {
    this.platform.ready().then(() => { 
      let data = {
        param1: this.param1,
        param2: this.param2
      }
      this.math.add(data).then(result => {
        alert(result);
      }).catch(error => {
        alert(error);
      })
    })
  }
}

I’m having issues saying plugin is not installed.

Any documentation or tutorial that would help me will be much appreciated!.

2

I’m not that much into this so all i can do is say what i so at plugin development. I include a Ionic Wrapper into the Plugin (Example)

1 Like
3

Did you use the Ionic Native Wrapper?