Ngx-scanner: Zxing and Angular 10

[miladrezaei]

Zxing cannot read the barcode in Angular 10. The camera is opened but it continuously fails to read the barcode. the same code and settings work in Angular 8.

"@angular/common": "~10.0.0",
"@angular/core": "~10.0.0",
"@zxing/ngx-scanner": "^3.0.0",

[kzay]

I also have isssu with angular 10

[thesandi001]

any update on this issue?
facing the same, doesnt work with angular 10

[asalhallak]

+1

[neofuture]

Same issue for me with NG10 it says on scan that there are no readers available to decode, but it will read a QR code

[neofuture]

if you toggle tryHarder after initialisation it now reads barcodes but this is not a fix

[neofuture]

Do we have any update on this as angular 10 is current now

[klipnot]

+1 It will be perfect if it could works on Angular 10

[werthdavid]

What exactly is the issue here? I have it working with Angular 10 on iOS and Windows (Chrome). Can you provide more information like log-output or errors?

[neofuture]

Issue is it will not scan a barcode (code 39) but will scan QR codes, the console if loogging the error states what I have already posted, there are no readers available to decode

[neofuture]

I cant provide more now, but for reference if you toggle the try harder mode, it will then read a barcode

[harrispap03]

What exactly is the issue here? I have it working with Angular 10 on iOS and Windows (Chrome). Can you provide more information like log-output or errors?

I'm running Angular 10 and I can't even use the library because it's incompatible. Can you please let me know how you made it work for you?

[pette9]

I have it working on Angular 10.1.4. I had to force update angular and then do an ugly hack to toggle try harder in the afterViewInit lifecycle.

  ngAfterViewInit() {
    this.delayAndTryHarder();
   }

 async delayAndTryHarder() {
     await this.delay(1000);
     this.toggleTryHarder();
  }

  delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
  }

  toggleTryHarder(): void {
    this.tryHarder = !this.tryHarder;
 }

This is not a solution but it is working for me until the issue with Angular 10 is fixed.

[neofuture]

same here set a timer to change the try harder flag

[klipnot]

I'm really surprised.

I'm working on a brand new Angular 10 project and I got this error:

ERROR in node_modules/@zxing/ngx-scanner/lib/zxing-scanner.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@zxing/ngx-scanner/lib/zxing-scanner.module) which declares ZXingScannerModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I can't even launch it.

"@angular/common": "~10.1.5",
"@angular/compiler": "~10.1.5",
"@angular/core": "~10.1.5",
"@zxing/library": "^0.17.1",
"@zxing/ngx-scanner": "^3.0.1",

[werthdavid]

I think I found a possible solution, it works in my local workspace now. Need some time to make a "clean" and proper solution

[harrispap03]

I have it working on Angular 10.1.4. I had to force update angular and then do an ugly hack to toggle try harder in the afterViewInit lifecycle.

  ngAfterViewInit() {
    this.delayAndTryHarder();
   }

 async delayAndTryHarder() {
     await this.delay(1000);
     this.toggleTryHarder();
  }

  delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
  }

  toggleTryHarder(): void {
    this.tryHarder = !this.tryHarder;
 }

This is not a solution but it is working for me until the issue with Angular 10 is fixed.

Well the scanner is now available for Angular 10 but I still can't make my scanner work. Since you've made it work for yourself, do you mind taking a few seconds and checking my component to see if I've made any mistakes in the implementation? It's only a few lines of code.

P.S I've also tried using the "tryHarder hack" as you mentioned before and after the version of the library being updated and I still couldn't make it work.

[jmannau]

I think the problems is a race condition.

When auto starting, the library tries to autostart, autostartScanner, line 560 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L560 the device is updated, which should cause the library to start scanning.

However on line 190 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L190 the device update is blocked due to this.isAutostarting === true.

The workaround above works by setting the device again, starting the video feed.

[harrispap03]

I think the problems is a race condition.

When auto starting, the library tries to autostart, autostartScanner, line 560 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L560 the device is updated, which should cause the library to start scanning.

However on line 190 https://github.com/zxing-js/ngx-scanner/blob/master/projects/zxing-scanner/src/lib/zxing-scanner.component.ts#L190 the device update is blocked due to this.isAutostarting === true.

The workaround above works by setting the device again, starting the video feed.

Thank you very much for tyring to help me out. I've been struggling with this for days
So, to make this clear. All I'm supposed to do is to go to L190 and do this.isAutostarting === true ?

[odahcam]

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

[harrispap03]

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

Oh nice. That might as well solve my problem. Hopefully.
Thank you for the heads up!

[StevenSwitten]

The scanner component will support Angular 10 in the next release. You can expect it in a few days.

Do you have a specific release date yet? We have our own release coming up and I'd rather not rollback to angular 9

[odahcam]

It will be published until next week.

[odahcam]

What's holding the new version is that I can't turn the torch/flash off after turning it on. Does anyone already seen this behavior/bug?

[pette9]

What's holding the new version is that I can't turn the torch/flash off after turning it on. Does anyone already seen this behavior/bug?

I don't have this problem on chrome for android and angular 10.1.4

[odahcam]

Can you share how you turn on and off the torch?

Edit: this is the approach I'm taking, but it doesn't turn the flash off.

https://github.com/zxing-js/browser/blob/14794724c3355f49f86a8929be975ec694f8b60a/src/readers/BrowserCodeReader.ts#L56-L68

[odahcam]

For anyone interested in helping, I have forked and edited this pen: https://codepen.io/odahcam/pen/oNLBmyx?editors=1010

It should turn on the torch and turn it off once again after 5 seconds, but it doesn't. Anyone who finds a solution for this would be helping a lot.

[sonntag-philipp]

Hello there,
I tried the pen on my android phone in chrome and it works like a charm. I've got a Xiaomi Poco F2 Pro with Android 10.

Primarily I'm also here because I want to ask if the @angular/* peer dependencies have to be so specific. I think it would be better to provide a bigger bandwith of angular versions, like "~10.1.0" or something else.

[odahcam]

Yes you're right. It's great news your Xiaomi works, mine doesn't seem to like me turning off it's torch 😞 . If you keep helping maybe we can achieve something production ready in the next months, but for now I'll leave torch there with experimental tags and hope that more devs come back with data and fixes for we to improve. Also, thanks.

[LeonardoX77]

It doesn't scan QR codes in my Xiaomi pocophone and my laptop camera with latest chrome. Using release 3.0.0 works perfect, which I think is working with Angular 9

[StevenSwitten]

For anyone interested in helping, I have forked and edited this pen: https://codepen.io/odahcam/pen/oNLBmyx?editors=1010

It should turn on the torch and turn it off once again after 5 seconds, but it doesn't. Anyone who finds a solution for this would be helping a lot.

It works on my OnePlus 6

[max-x-1000000]

Any update? Camera preview is also blank?! (Angular 11)

[ojathelonius]

Works for me on Angular 11 on OnePlus 5T. I had dark screens at first, then launched the camera app once separately and everything worked perfectly afterwards.

[max-x-1000000]

Good to know but that's still a problem. I can't get every user to relaunch their camera apps every time they need to use the scanner

[ojathelonius]

@max-x-1000000
Did you reproduce this fix with your own phone (starting the camera app & retrying) ? I would like to know if this fixed the issue or if it was fortuitous.

[max-x-1000000]

I have not

[ojathelonius]

@max-x-1000000 did you look into this : https://github.com/zxing-js/ngx-scanner/issues/359
It looks like rollbacking to 3.0.0 resolves the issue, perhaps that's what did the trick for me.

[max-x-1000000]

I downgraded angular to 9.1.13 and used 3.0.0