时间戳

首页 > 解决方案 > ionic 5 原生条码扫描器 - 无法导入

angular - ionic 5 原生条码扫描器 - 无法导入

问题描述

希望能在这方面得到一些帮助。我正在尝试将 Ionic 的原生条码扫描仪导入到我的 Ionic 5、Angular 9 应用程序中。我安装了电容器并使用以下方法安装条形码扫描仪：

npm install phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
ionic cap sync

然后我在组件中设置条形码扫描仪，如下所示：

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

constructor(private barcodeScanner: BarcodeScanner) { }

this.barcodeScanner.scan().then(barcodeData => {
 console.log('Barcode data', barcodeData);
}).catch(err => {
    console.log('Error', err);
});

这引发了空注入器错误。看到论坛，您似乎必须在应用程序模块中导入条形码扫描仪作为提供者。我在 app.modules.ts 中按如下方式执行此操作：

import {BarcodeScanner} from '@ionic-native/barcode-scanner';
.....
providers: [
    BarcodeScanner,
    StatusBar,
    SplashScreen,
    FileTransfer, FileTransferObject,
    File,
    InAppBrowser,
    Keyboard,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    UpdateService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    }
  ],
  bootstrap: [AppComponent]

问题是我现在收到以下错误：NgModule 'AppModule' 的提供程序无效 - 只允许提供 Provider 和 Type 的实例

以前有没有其他人遇到过这个问题和解决方案？我还没有安装cordova只是我所需要的电容器，这是正确的吗？

感谢您对此的任何帮助，因为我处于死胡同。在安装的离子信息+ barcde 扫描仪版本下方。提前谢谢了。

@ionic-native/barcode-scanner": "^5.26.0",
@ionic-native/core": "^5.26.0

Ionic:

   Ionic CLI                     : 5.4.15 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.2
   @capacitor/core : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina
   Xcode  : Xcode 11.5 Build version 11E608c

标签： angularcordovaionic-frameworkcapacitor

解决方案

您可能应该从 app.module 中的“@ionic-native/barcode-scanner/ngx”而不是“@ionic-native/barcode-scanner”导入 BarcodeScanner。

推荐阅读