Angular 8 - camera loading error

Unable to find the scanner either on init or AfterviewInit after upgrade to Angular 8, Zxing - 1.7

typescript :34.5

It works perfect with Angular 7.

HTML

   <zxing-scanner #scanner [autostart]="true"
           [device]="currentDevice" (scanFailure)="handleScanFailure($event)"  (scanError)="handleScanError($event)" (scanComplete)="handleScanComplete($event)" (scanSuccess)="handleScanSuccess($event)" [formats]="allowedFormats"
         ></zxing-scanner>

TS (with static: true)

 @ViewChild('scanner',{static:false}) scanner: ZXingScannerComponent;

 private initCamera(): void {
    this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
      this.hasDevices = true;
      this.availableDevices = devices;
      if (this.availableDevices.length > 1) {
        const defaultCamera = this.availableDevices.filter(e => e.label.toLocaleLowerCase().indexOf('back') > -1);
        if (defaultCamera !== null && defaultCamera !== undefined) {
          this.currentDevice = defaultCamera[0];
        } else {
           this.currentDevice = this.availableDevices[0];
        }
      } else {
        this.currentDevice = this.availableDevices[0];
      }
    });
  }

Error: The device must be a valid MediaDeviceInfo or null.

---

Edit: added code formatting

[ymallikreddy521]

Sure.

HTML:

     <zxing-scanner  #scanner  [autofocusEnabled]="true" [autostart]="false" [enable]="true"  [device]="currentDevice"
          (scanComplete)="handleScanComplete($event)" [formats]="allowedFormats"
          [tryHarder]="true"></zxing-scanner>

TS:

 @ViewChild('scanner',{static:true, read: false}) scanner: ZXingScannerComponent;

This is change and must to set to NULL
 currentDevice: MediaDeviceInfo = null;

ngOnInit() {
    this.onPageInit();
  }

  private onPageInit(){
    this.initCamera();
    this.scanner.permissionResponse.subscribe(
      (perm: boolean) =>{
       this.hasPermission = perm;
      });

    this.allowedFormats = [
      BarcodeFormat.AZTEC,
      BarcodeFormat.CODABAR,
      BarcodeFormat.CODE_39,
      BarcodeFormat.CODE_93,
      BarcodeFormat.CODE_128,
      BarcodeFormat.DATA_MATRIX,
      BarcodeFormat.EAN_8,
      BarcodeFormat.EAN_13,
      BarcodeFormat.ITF,
      BarcodeFormat.MAXICODE,
      BarcodeFormat.PDF_417,
      BarcodeFormat.QR_CODE,
      BarcodeFormat.RSS_14,
      BarcodeFormat.RSS_EXPANDED,
      BarcodeFormat.UPC_A,
      BarcodeFormat.UPC_E,
      BarcodeFormat.UPC_EAN_EXTENSION
    ];
    this._loggerService.log('inside the init camera');
  }

  private initCamera(): void {
    this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
      this.hasDevices = true;
      this.availableDevices = devices;
      this.currentDevice = null;
      if (this.availableDevices.length > 1) {
        const defaultCamera = this.availableDevices.filter(e => e.label.toLocaleLowerCase().indexOf('back') > -1);
        if (defaultCamera !== null && defaultCamera !== undefined) {
          this.currentDevice = defaultCamera[0];
        } else {
           this.currentDevice = this.availableDevices[0];
        }
      } else {
        this.currentDevice = this.availableDevices[0];
      }
    });
  }

---

Edit: added propper syntax highlighting.

[odahcam]

Thank you @ymallikreddy521 . I’m locking this now for clarity, please anyone reading this feel free to open new issues.