Use cordova plugin into ionicframework without ionic-native

Question

I've found a plugin made for codova:
https://github.com/dff-solutions/dff-cordova-plugin-honeywell
The documentation describes how to use directly the object Honeywell, but not how to import into the app.module and make the proper adaptation. I've not found clear documentation about ionic native development or cordova plugin migration to ionic 2.
Please any guide lines on how to get any cordova plugin into modern ionic 2.
Update: There are workarounds , in my case, as I have a global variable created by the plugin, I declare the variable before the @Component decorator. But this tricks breaks the dependency injection system.

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var Honeywell;//declare the global created by the plugin

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  barcode: string;
  constructor(public navCtrl: NavController, public zone: NgZone) {
        Honeywell
          .onBarcodeEvent( ... );
  }

}

Dom Slatford Dom Slatford · Accepted Answer · 2017-12-11T11:36:19

Using 'Honeywell' at the top of any provider/page you need it in should be enough, there's no need to amend app.module.ts, its not a dependency Angular can handle.

declare let Honeywell: any;

However I created a TypeScript file to stub the methods and call through to the plugin

import { Injectable } from '@angular/core';
import { IonicNativePlugin } from '@ionic-native/core';
declare let Honeywell: any;

@Injectable()
export class HoneywellBarcodeScanner extends IonicNativePlugin {    
    onLog(success, error, args?): Promise<any> { 
        return Honeywell.onLog(success, error, args);
    }

    onBarcodeEvent(success, error, args?): Promise<any> { 
        return Honeywell.onBarcodeEvent(success, error, args);
    }

    onFailureEvent(success, error, args?): Promise<any> { 
        return Honeywell.onFailureEvent(success, error, args); 
    }

    barcodeReaderPressSoftwareTrigger(success, error, args?): Promise<any> { 
        return Honeywell.barcodeReaderPressSoftwareTrigger(success, error, args); 
     }    
}

If your interested I then mock out the Plugin to be used with Ionic Serve (selecting a mocked barcode and calling barcode scanned events), here's a full example (using 3 types of barcode scanners, linea, honeywell and camera) https://github.com/domisginger/ionic-cordova-barcode-examples

honeywell-barcode-scanner.mock.ts

import { HoneywellBarcodeScanner } from './../plugin-interfaces/honeywell-barcode-scanner';

export class HoneywellBarcodeScannerMock extends HoneywellBarcodeScanner {    
    onLog(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    onBarcodeEvent(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    onFailureEvent(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }

    barcodeReaderPressSoftwareTrigger(): Promise<any> {
        return new Promise((resolve, reject) => {
            resolve();
        });
    }
}

plugin-factories.ts

import { Platform } from "ionic-angular/platform/platform";
import { AlertController } from "ionic-angular";
import { HoneywellBarcodeScanner } from "./honeywell-barcode-scanner";
import { HoneywellBarcodeScannerMock } from "./../mocks/honeywell-barcode-scanner.mock";

let isMobile = (platform: Platform): boolean => {
    return platform.is('ios') || platform.is('android');
}

export let PluginFactories = {
    honeywellBarcodeScannerFactory:  (platform: Platform) => { 
        return isMobile(platform) ? new HoneywellBarcodeScanner() : new HoneywellBarcodeScannerMock();
    }
}

Then in app.module.ts

providers: [
    {
      provide: HoneywellBarcodeScanner, 
      useFactory: PluginFactories.honeywellBarcodeScannerFactory,
      deps: [Platform]
    },
]

Use cordova plugin into ionicframework without ionic-native

1 Answers