Plugin does not work in Ionic 3 & Angular 4

[DeanWilliamMills]

Hi

I added this plugin to be able to scan South African driver license disks, but when I call the CipherlabRS30CordovaPlugin.requestScan() method, it does nothing and when I run the app in production mode, I get the following error:

ReferenceError: CipherlabRS30CordovaPlugin is not defined

Here is my code:

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

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

constructor(public navCtrl: NavController) { }

async ngOnInit() {

await (<any>window).cordova.plugins.CipherlabRS30CordovaPlugin.initialise(await function () {

  (<any>window).cordova.plugins.CipherlabRS30CordovaPlugin.setReceiveScanCallback(function (data, type) {
    console.log("scan received: " + data + "(" + type + ")");
  });
});

}

scanBarcode() {

(<any>window).cordova.plugins.CipherlabRS30CordovaPlugin.requestScan(function () {   });

} }

Any help would be much appreciated, thanks.

[mribbons]

Hi @DeanWilliamMills, Have you looked https://github.com/mribbons/cordova-plugin-cipherlab-rs30/issues/13? It seems like the same issue.

[DeanWilliamMills]

Hi Mike,

Thanks for your reply. I actually worked of issue #13, because it's also Ionic 3 & Angular.

So I am using the syntax (<any>window).cordova.plugins.CipherlabRS30CordovaPlugin, which removes build errors, but still gives an error at runtime.

I also tried declaring a global variable like this declare var CipherlabRS30CordovaPlugin: any; and then calling CipherlabRS30CordovaPlugin.initialise();, but getting the same error.

Just a side note: The new cordova-android (Android platform) version (7.0.0) folder structure has changed, so adding this plugin to cordova-android (7.0.0) cause the project not to build, so I reverted my cordova-android back to version 6.3.0, but then I get the error described above.

Can you maybe please test it on your side on a latest Ionic / Angular project? Thanks in advanced

[mribbons]

Hi @DeanWilliamMills, I'm unable to allocate any time at this stage, I might be able to help in a 2 weeks.

Can you try using a different plugin and see if you get a similar issue? This might point the way to resolving the issue.

Also it might be worth testing with a basic cordova app, first without typescript then with typescript, but no ionic or angular.

[DeanWilliamMills]

Hi @mribbons,

No problem, I understand. I tested it with a different plugin and I can confirm, the other plugin did work. I followed the exact same steps with the other plugin as I did with this plugin.

[mribbons]

Hi @DeanWilliamMills, Can you advise what the other plugin was? When I get a chance I will use it as a reference.

Can you also test cordova app + cipherlab-rs30 without ionic or angular please.

[DeanWilliamMills]

Hi @mribbons,

I used BlinkID's PDF417 plugin. I'll try the plugin with Cordova without Ionic + Angular and will revert back to you. Thanks.

[mribbons]

Hi @DeanWilliamMills, I managed to get this working.

at the top of home.ts you need:

declare var cordova: any;

then anywhere you have window.cordova, just replace it with cordova eg

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var cordova: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  async ngOnInit() {
    try {

      await cordova.plugins.CipherlabRS30CordovaPlugin.initialise(async function () {

        console.log("init done.");

        cordova.plugins.CipherlabRS30CordovaPlugin.setReceiveScanCallback(function (data, type, binary) {
          console.log("scan received: " + data);
        });
      });
    } catch (e) {
      console.log(`error`);
      console.log(e);
    }
  }

  async requestScan() {
    cordova.plugins.CipherlabRS30CordovaPlugin.requestScan(function () {
      // This callback doesn't need to do anything, the setReceiveScanCallback callback is what receives the scan data.
    });
    console.log(`scan requested.`);
  }
}

[DeanWilliamMills]

Hi @mribbons Sorry for the late reply. I tried it now with cordova-android 7.0.0, but then the project won't build, because it can't find platforms\android\res\xml\config.xml due to the new folder layout. So I reverted back to cordova-android 6.3.0.

I used the code you mentioned above and there are no errors and the init done gets logged. But when I call the requestScan method nothing happens. When I log the CipherlabRS30CordovaPlugin before requestScan I can see it picks up the plugin. So the camera opens when you call requestScan?

Thanks for you time and help

[mribbons]

Hi @DeanWilliamMills, This plugin doesn't use the camera, it is for the Cipherlab RS30 which has a built in barcode scanner.