Ionic-native: Cannot use v5 Plugin API for local plugins

[ajcrites]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
Using Ionic Native decorators with application-level code does not seem to work. This prevents you from creating application-specific or custom plugins for an app. This worked with Ionic Native v4, but no longer with v5.

import { Cordova, Plugin } from '@ionic-native/core';
// Cordova and Plugin are both 'undefined', 

Expected behavior:
You should be able to import Ionic Native decorators at the application level.

Steps to reproduce:

1. Create a new Ionic v4 project if necessary (ionic start ionic-no-reusable-header blank --cordova --type=angular).
2. Update some code to import Ionic Native decorators
3. Notice that when you run the code the decorators are undefined although TypeScript seems to think that they can be imported.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)             : 4.5.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.11
   @angular-devkit/build-angular : 0.9.0-rc.3
   @angular-devkit/schematics    : 0.9.0-beta.3
   @angular/cli                  : 6.2.5
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v11.1.0
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[ihadeed]

You can't create custom plugins within your app the same way as before. You can do one of the following:

1. Clone the repo, write your plugin & compile it
2. Import the underlying functions from @ionic-native/core and use them to proxy your calls. If you look at the compiled JavaScript code you will see how it works. Here are a few examples:

// Before
import { Cordova, Plugin } from '@ionic-native/core';

@Plugin({
  plugin: 'cordova-plugin-myplugin',
  pluginRef: 'cordova.plugins.myplugin',
  ... // rest of plugin opts
})
export class MyPlugin {
  @Cordova({ 
     ... // function proxy opts
   })
  someFunction(arg1, arg2) {};
}

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

export class MyPlugin extends IonicNativePlugin {
    static plugin = 'cordova-plugin-myplugin';
    static pluginRef = 'cordova.plugins.myplugin';
    ....     // rest of plugin opts

    someFunction(arg1, arg2) {
       return cordova(this, 'someFunction', { ... /* function proxy opts */}, [arg1, arg2]);
    }
}

[maxtacco]

Hi, thank you for your work. But, even though the current solutions to create a custom plugin work the process is somewhat cumbersome compared to how it was done previously. Is it possible for the Ionic team to extract the build scripts into a separate repo so that everyone interested could use them without getting all other plugins?

[frederic-thibault]

Hi,

There is a guide somewhere I can look at to create my own native plugin for Ionic v5?

Thanks,