I am trying to incorporate the zxing scanner into my angular app and after following online guides it is coming up with the following error which I can't seem to solve,
'zxing-scanner' is not a known element:
- If 'zxing-scanner' is an Angular component, then verify that it is part of this module.
- If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
My files are:
qr-scanner-page.ts
import { Component, VERSION, OnInit, ViewChild } from '@angular/core';
import { ZXingScannerComponent } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';
@Component({
selector: 'app-qr-scanner',
templateUrl: './qr-scanner.page.html',
styleUrls: ['./qr-scanner.page.scss'],
})
export class QrScannerPage implements OnInit {
ngVersion = VERSION.full;
@ViewChild('scanner')
scanner: ZXingScannerComponent;
hasDevices: boolean;
hasPermission: boolean;
qrResultString: string;
qrResult: Result;
availableDevices: MediaDeviceInfo[];
currentDevice: MediaDeviceInfo;
constructor() { }
ngOnInit(): void {
this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => {
this.hasDevices = true;
this.availableDevices = devices;
// selects the devices's back camera by default
for (const device of devices) {
if (/back|rear|environment/gi.test(device.label)) {
this.scanner.changedevice(device);
this.currentDevice = device;
break;
}
}
});
this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false);
this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result);
this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm);
}
handleQrCodeResult(resultString: string) {
console.debug('Result: ', resultString);
const final_value = JSON.parse(resultString)
this.qrResultString = 'name: ' + final_value.name + ' age: ' + final_value.age;
}}
the qr-scanner.module.ts file is:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { QrScannerPageRoutingModule } from './qr-scanner-routing.module';
import { QrScannerPage } from './qr-scanner.page';
import { ZXingScannerModule } from '@zxing/ngx-scanner';
import { Result } from '@zxing/library';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
QrScannerPageRoutingModule,
ZXingScannerModule
],
declarations: [QrScannerPage]
})
export class QrScannerPageModule {}
the qr-scanner.html file is:
<ion-header>
<ion-toolbar>
<ion-title>QR-Scanner</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="scanner-shell" [hidden]="!hasDevices">
<zxing-scanner #scanner start="true" [device]="currentDevice"
(scanSuccess)="handleQrCodeResult($event)" [formats]="['QR_CODE']"></zxing-scanner>
<section class="results" *ngIf="qrResultString">
<small>Result</small>
<strong>{{ qrResultString}}</strong>
</section>
</div>
</ion-content>
any suggestions would be hugely appreciated, I am slightly stuck! Many thanks
