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

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.

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.

Is there an estimated time for the resolution of this issue? Thanks

@pette9 would you mind openning a PR?

@odahcam done

I have the same problem where the camera feed turns on for a split second then vanishes. Also I did not have the warning messages in the console about setting the same device until i tried to enforce to use the back camera.