Issue with Ionic 4?

[RZR666]

Uncaught TypeError: Object(...) is not a function at vendor.js:77955 at Module../node_modules/ca-cleversolutions-zebraprinter/native/index.js (vendor.js:78008) at webpack_require (runtime.js:84) at Module../src/app/app.module.ts (main.js:1742) at webpack_require (runtime.js:84) at Module../src/main.ts (main.js:1835) at webpack_require (runtime.js:84) at Object.0 (main.js:1858) at webpack_require (runtime.js:84) at checkDeferredModules (runtime.js:46)

cordova.js:1218 deviceready has not fired after 5 seconds.

cordova.js:1211 Channel not fired: onCordovaInfoReady

vendor.js:70985 Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.

[RZR666]

I think it's something to do with the Cordova()...

__decorate([ Cordova(), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise) ], ZebraPrinter.prototype, "disconnect", null);

[RELAXccc]

index.js needs rewriting. since ionic 4 ionic-native has a different template

[RELAXccc]

i think similar to this

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

@Plugin({
    pluginName: 'ZebraPrinter',
    plugin: 'ca-cleversolutions-zebraprinter',
    pluginRef: 'cordova.plugins.zebraPrinter',
    repo: 'git@github.com:cleversolutions/cordova-zebra-printer.git',
    platforms: ['Android', 'iOS'] // Array of platforms supported, example: ['Android', 'iOS']
})

@Injectable()
export class ZebraPrinter extends IonicNativePlugin {

    @Cordova()
    print(data: String): Promise<any> {
        return;
    }
    @Cordova()
    isConnected(): Promise<any> {
        return;
    }
    @Cordova()
    printerStatus(data: String): Promise<any> {
        return;
    }
    @Cordova()
    connect(data: String): Promise<any> {
        return;
    }
    @Cordova()
    disconnect(): Promise<any> {
        return;
    }
    @Cordova()
    discover(): Promise<any> {
        return;
    }

}

[RELAXccc]

you still can use this plugin in ionic 4

if you write your own service to access the Cordova library directly

import {Injectable} from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class PrinterService {

    constructor() {
    }

    dicsover(): Promise<Array<Printer>> {
        return new Promise<Array<Printer>>(function (resolve, reject) {
            // @ts-ignore
            window.cordova.plugins.zebraPrinter.discover(
                function (ret) {
                    resolve(ret);
                },
                function (err) {
                    reject(err);
                }
            );
        });
    }

    connect(printer: Printer): Promise<string> {
        return new Promise<string>(function (resolve, reject) {
            // @ts-ignore
            window.cordova.plugins.zebraPrinter.connect(
                printer.address,
                function (ret) {
                    resolve(ret);
                },
                function (err) {
                    reject(err);
                }
            );
        });
    }

    print(data: string): Promise<string> {
        return new Promise<string>(function (resolve, reject) {
            // @ts-ignore
            window.cordova.plugins.zebraPrinter.print(
                data,
                function (ret) {
                    resolve(ret);
                },
                function (err) {
                    reject(err);
                }
            );
        });
    }

    printerStatus(printer: Printer): Promise<string> {
        return new Promise<string>(function (resolve, reject) {
            // @ts-ignore
            window.cordova.plugins.zebraPrinter.printerStatus(
                printer.address,
                function (ret) {
                    resolve(ret);
                },
                function (err) {
                    reject(err);
                }
            );
        });
    }
}

export interface Printer {
    address: string;
    name: string;
}

see https://github.com/cleversolutions/cordova-zebra-printer/blob/e9949500fb2cfc4fd0e8c30e84f05ac5fb028f6f/native/index.js#L69-L106 to implement the other functions yourself

[sahyun1]

@RELAXccc could you elaborate bit further?

I didn't put this in the app.module.ts as it won't run as the above error.

then I followed your approach

return new Promise((resolve, reject) => { // @ts-ignore window.cordova.plugins.zebraPrinter.discover().then((pass) => { console.log(pass); resolve(pass); }, (error) => { console.log(error); reject(error.message); }); });

and when I run, I get ERROR TypeError: Cannot read property 'then' of undefined

the strange thing is when I debug window.cordova.plugins.zebraPrinter is not null nor discover() function..

I haven't modified cordova-zebra-printer/native/index.js.

[sahyun1]

ok, I tried as is from @RELAXccc , not using arrow function and it's working apart from printerStatus function, I think it's more plugin level issue.

[mj6uc]

Did any one get this plugin to work on ionic4?

[eaabak]

Yes i tried it, it works. but it is causing problems in iOS. @mj6uc

[mj6uc]

@Alan4747 Could you please detail steps you followed to get it working even for Android on ionic 4 -- we are stuck on

Uncaught TypeError: Object(...) is not a function
at vendor.js:77955
at Module../node_modules/ca-cleversolutions-zebraprinter/native/index.js (vendor.js:78008)

Would it be possible to share the service you made that works on android?

[RELAXccc]

sorry we aren't using this Plugin anymore.

if you output

console.log(window.cordova.plugins); and the "zebraPrinter" plugin shows up, my code from above probably should work to directly access the plugin.

Else someone has to write a new ionic Native adapter for this.

I also realized some time ago that some cordova plugins can't be located at window.cordova.plugins anymore I forgot the new path, but if anyone knows about this, maybe that could help here.

[alstonkim]

This is how I'm using in my ionic4 Android app(don't have ios version), hope it's helpful to who's having trouble. Just note that printerStatus doesn't work

dicsover(): Promise<Array<Printer>> {
    return new Promise((resolve, reject) => {
      // @ts-ignore
      window.cordova.plugins.zebraPrinter.discover(
        // tslint:disable-next-line:only-arrow-functions
        function(ret) {
          resolve(ret);
        },
        // tslint:disable-next-line:only-arrow-functions
        function(err) {
          console.log(err);
          reject(err);
        }
      );
    });

  }

 connect(printer: Printer): Promise<string> {
    return new Promise((resolve, reject) => {
      // @ts-ignore
      window.cordova.plugins.zebraPrinter.connect(
        printer.address,
        // tslint:disable-next-line:only-arrow-functions
        function(ret) {
          resolve(ret);
        },
        // tslint:disable-next-line:only-arrow-functions
        function(err) {
          reject(err);
        }
      );
    });
  }

 print(data: string): Promise<string> {

    return new Promise((resolve, reject) => {
      // @ts-ignore
      window.cordova.plugins.zebraPrinter.print(
        data,
        // tslint:disable-next-line:only-arrow-functions
        function(ret) {
          resolve(ret);
        },
        // tslint:disable-next-line:only-arrow-functions
        function(err) {
          reject(err);
        }
      );
    });
  }

[eaabak]

@mj6uc You need to download it with this command:

ionic cordova plugin add ca-cleversolutions-zebraprinter

Add plugin in your app.module.ts

import { ZebraPrinter } from 'ca-cleversolutions-zebraprinter/native';

  providers: [
    StatusBar,
    SplashScreen,
    ZebraPrinter
  ],

Then I created a component and built it in the component.

import { Component, OnInit } from '@angular/core';
import { ZebraPrinter } from 'ca-cleversolutions-zebraprinter/native';

@Component({
  selector: 'app-zebra-printer',
  templateUrl: './zebra-printer.component.html',
  styleUrls: ['./zebra-printer.component.scss'],
})
export class ZebraPrinterComponent implements OnInit {

  address: any;
  name: any;

  constructor(private zebraPrinter: ZebraPrinter) {
   this.discover();
 }

  ngOnInit() { }

  discover() {
    this.zebraPrinter.discover().then(result => {
      this.address = result[0].address;
      this.name = result[0].name;
      console.log(result);
    }).catch(err => {
      console.log(err);

    });
  }

  conectingToPrinter() {
    this.zebraPrinter.connect(this.address).then(result => {
      console.log("connceting:" + result);
    }).catch(err => {
      console.log(err);

    })
  }

}

This way worked for me in Android.

[AlexandreInsua]

Hi @cleversolutions, I need send data from an app in Ionic 5 to a zebra printer. I tried these solutions but they didn't work. Have you thinked about update this plugin to Ionic 5 or 6?

[cleversolutions]

Hi Alexandre,

We are using this plugin in a product at the moment; however, we haven’t updated it since Ionic 3. We do plan to update this product for Ionic 5. I was hoping to get that started this fall, but it will probably be early 2021 instead. This was originally developed for Capacitor (while it was still in alpha) then ported to Cordova when it became clear our timeline was sooner than Capacitors. We have migrated other apps from Cordova to Capacitor with great results, so I’m likely going to abandon the Cordova plugin and develop this as a Capacitor plugin instead.

On Oct 21, 2020, at 5:46 AM, Alexandre Insua Moreira notifications@github.com wrote:

Hi @cleversolutions https://github.com/cleversolutions, I need send data from an app in Ionic 5 to a zebra printer. I tried these solutions but they didn't work. Have you thinked about update this plugin to Ionic 5 or 6?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cleversolutions/cordova-zebra-printer/issues/3#issuecomment-713448067, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFS3UK3JDY5W5FL5K2WATVDSL2UXDANCNFSM4GLHWF7Q.

[Karthickdev]

@mj6uc

Did you able to make it work in iOS?