ZXingScannerModule, похоже, не работает с Angular

#angular

#angular

Вопрос:

я создал новый проект и попытался заставить qr-сканер работать, но я не могу заставить его работать. вот общедоступный репозиторий со всем проектом. https://github.com/JoeY34kaze/ngx_not_working/tree/main

я следил за этим руководством https://github.com/zxing-js/ngx-scanner/wiki

я получаю ошибку в app.component.html

файл .html

 <zxing-scanner
  #scanner
  [formats]="['QR_CODE', 'EAN_13']"
  (camerasFound)="cameraFound($event)"
  (camerasNotFound)="camerasNotFound($event)"
  (scanSuccess)="scanSuccessHandler($event)"
>
</zxing-scanner>
 

ошибка

 'zxing-scanner' is not a known element:
1. If 'zxing-scanner' is an Angular component, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
 

модуль приложения

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
// the scanner!
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ZXingScannerModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

app.componet.ts является

 import { Component, OnInit } from '@angular/core';
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  scannerEnabled = true;
  result: string

  constructor() {}

  ngOnInit(): void {}

  camerasNotFound(e: Event) {
    // Display an alert modal here
  }

  cameraFound(e: Event) {
    // Log to see if the camera was found
  }

  onScanSuccess(result: string) {
    console.log(result);
  }
}
 

Комментарии:

1. Возможно, попробуйте добавить его также в массив exports .

Ответ №1:

попробуйте импортировать CUSTOM_ELEMENTS_SCHEMA и добавить его в массив schemas раздела NgModule в файле app.module.ts

 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})