angular - 'zxing-scanner' 不是已知元素 : 1. 如果 'zxing-scanner' 是 Angular 组件，则验证它是该模块的一部分

Question

我正在尝试将 zxing 扫描仪合并到我的 Angular 应用程序中，在按照在线指南进行操作后，它出现了以下我似乎无法解决的错误，

'zxing-scanner' 不是已知元素:

1. 如果“zxing-scanner”是一个 Angular 组件，则验证它是该模块的一部分。
2. 如果“zxing-scanner”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以禁止显示此消息。

我的文件是:

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;
}}

qr-scanner.module.ts 文件是:

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 {}

qr-scanner.html 文件是:

<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>

任何建议将不胜感激，我有点卡住了!非常感谢

Answer 1

这发生在我身上是因为我使用的是 Angular 版本 12，我更新到 Angular 14 并且它有效

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

有关如何更新 Angular 的更多详细信息，请参阅此处的答案 https://stackoverflow.com/a/43931987/3596441