Version 3.1.1 sets device then immediately sets it to undefined when built with angular cli with --prod flag.

After running ng serve. The device is set and the scanner works as expected, but the following warning is logged on console: Setting the same device is not allowed.

After running ng build --prod. The same error is logged but the device is set and immediately after set to undefined. It shows the camera video window for a second or less and it disappears.

To reproduce: clone the demo app, run ng build --prod and start scanner

The expected behaviour should be, even if setting similar device, it should behave like it does on dev environment when you build for production environment

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: chrome
• Version 86

Smartphone (please complete the following information):

• Device: android
• OS: android
• Browser chrome
• Version 86

Additional context I don’t know why it alters the already set device in production mode and not in dev mode.

[pette9]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message. I gave up when I added a new property just to keep the exception name in a string and this property doesn’t exist (???) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I’m sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can’t afford to spend more time in it this month.

@odahcam I agree it’s probably a configuration error specific to your environment. I have vendored the master branch of the scanner into my application and the problem of resetting the entire component when built with optimization enabled seems to have disappeared. I now get a constant camera stream but I have ReferenceError: Cannot access 'n' before initialization error logged in the console which means I cannot scan barcodes yet.

UPDATE I have managed to make the vendored scanner work with angular 10.2.0 optimization on --prod build. @odahcam checking the exception message did work. I expected to hit a wall if I encountered an exception without a message but I didn’t. I only encountered the error you encountered on the screenshot above. If it is possible to have the library throw error messages for all expected errors, they could be used when error.name, or instanceof fails. Earlier update that there might be a configuration error specific to your environment was wrong. I ended up encountering similar errors. I also encountered #361 (comment) which was a bug on scanFromDeviceObservable function using controls.stop() before controls is initialized. Changing this to this.scannerControls?.stop(); fixed the issue.

Could you give us more information about your latest update? Maybe a sample code? Version 3.0.* has significant performance issues for us so it is not an alternative. We are trying to get 3.1.2 to work but we are running into the same issues that you discussed here.

When you try to build the master branch with --prod flag and build optimization enabled, the js produced by ivy build pipeline breaks some things. I don’t know the root cause of this but @odahcam has intimated it may be that “Angular compiler and zxing/browser are using different variations of the zxing/library builds”.

I have vendored the scanner locally and I encountered three of the things that ivy breaks in the scanner. All three are in the browser-multi-format-continuous-reader.ts file.

1. The built js has a conflict in variable naming so you encounter ReferenceError: Cannot access 'n' before initialization to solve this I changed controls variable name on line 41 of browser-multi-format-continuous-reader.ts file to ctrls now the file from line 38 looks like this:

      const scan$ = new BehaviorSubject<ResultAndError>({});
      let ctrls;
   
      try {
      ctrls = await this.decodeFromVideoDevice(deviceId, previewEl, (result, error) => {
       ...
   

2. I encountered #361 (comment) Cannot read property 'stop' of undefined which was caused by using controls.stop() before controls is initialized on line 64 of the same file. Changing this to this.scannerControls.stop() fixed this issue.

3. The third thing that ivy broke was that it stripped away the class names for the errors that are checked from line 51 to 60 of the file above:

      if (
        // scan Failure - found nothing, no error
        errorName === NotFoundException.name ||
        // scan Error - found the QR but got error on decoding
        errorName === ChecksumException.name ||
        errorName === FormatException.name
     ) {
        scan$.next({ error });
        return;
     }
   

These class names are defined on zxing/library. For some reason these class names are all renamed to e after --prod build which means that they are always handled as fatal errors and therefore the scanner stops. @odahcam tried to add a kind property on the library to do the error checking on the scanner but this was stripped away too. Luckily the most frequent Exception of the three, NotFoundException which is thrown when a barcode is not found on the stream has an error message that survives the build pipeline. When you check for this by adding || error.message.includes('No MultiFormat Readers were able to detect the code.') on the if conditions above. The scanner works properly. I can confirm that with these ugly fixes the scanner works with the latest angular version 11.0.0. These are not permanent fixes as you can see 1 and 3 do not address the root cause of why this is happening and 3 doesn’t check for the other two non-fatal errors since the library do not throw the error message for them. That said I’ve been working with these fixes with acceptable degree of success on the latest angular version with optimization enabled with cli --prod build.

[fitness23]

I had same issue. Rolling back to release 3.0.1 = npm install @zxing/ngx-scanner@3.0.1 fixes it and seems to work fine with Angular 11. Of course this is a temporary measure.