Ionic - BarcodeScanner .scan не является функцией

Question

Я внедряю сканер QRCode в новое приложение, созданное на базе ionic 4.0.6, и я ознакомился с документацией о том, как интегрировать сканер.

Вот документы: https://ionicframework.com/docs/native/barcode-scanner/

Ионная информация:

Ionic:

   ionic (Ionic CLI)  : 4.0.6 (/Users/christiangiupponi/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : android 6.2.3

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   NodeJS            : v10.8.0 (/usr/local/bin/node)
   npm               : 5.0.3
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Environment:

   ANDROID_HOME : /Users/christiangiupponi/Library/Android/sdk

Это мой код:

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    QrCodeAllModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="qrcodeid">
    <qr-code-all [qrCodeType]="url"
        [qrCodeValue]="'SK is the best in the world!'"
        [qrCodeVersion]="'3'"
        [qrCodeECLevel]="'M'"
        [qrCodeColorLight]="'#ffffff'"
        [qrCodeColorDark]="'#000000'"
        [width]="11"
        [margin]="4"
        [scale]="4"
        [scanQrCode]="false">
    </qr-code-all>
  </div>

  <button ion-button (click)="openScanner()">Open</button>
</ion-content>

И это файл home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private barcodeScanner: BarcodeScanner) {

  }

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

}

Как видите, он мало что делает, просто кнопка для вызова функции openScanner.
Если я запускаю ее на своем устройстве (Android 7) Я вижу пустую страницу.
Используя инструменты Chrome, я проверил приложение и вижу:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at BarcodeScanner.scan (vendor.js:81810)
    at new HomePage (main.js:61)
    at createClass (vendor.js:13119)
    at createDirectiveInstance (vendor.js:12962)
    at createViewNodes (vendor.js:14420)
    at createRootView (vendor.js:14309)
    at callWithDebugContext (vendor.js:15734)
    at Object.debugCreateRootView [as createRootView] (vendor.js:15017)
    at ComponentFactory_.create (vendor.js:11914)
    at ComponentFactoryBoundToModule.create (vendor.js:4666)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (vendor.js:53655)
    at NavControllerBase._failed (vendor.js:53648)
    at vendor.js:53695
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5396)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

Проверка библиотеки Я вижу функцию, и у нее есть некоторая документация по ней, как использовать, и код тот же, который я добавил в моем методе.
Где ошибка?

Answer 1

Проверьте тип вашего проекта в файле ionic.config.json.

Если тип "ionic-angular", установите версию 4.xx.В вашем случае

npm i -s @ ionic-native / barcode-scanner @ 4.20.0

Если тип "угловой", то установите версию 5.xx-beta

npm i -s @ ionic-native / barcode-scanner @ 5.0.0-beta.24

Примечание:

Добавить ngx в конце импортатолько если вы используете Angular 6

import {BarcodeScanner} из '@ ionic-native / barcode-scanner / ngx';если нет, удалите ngx из импорта как в app.module.ts, так и в app.component.ts

import {BarcodeScanner} из '@ ionic-native / barcode-scanner';

вот и все... Приятного кодирования ...

Answer 2

Попробуйте это ..

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

И функция:

  public openScanner(): void {
        let options: BarcodeScannerOptions = {
           showTorchButton: true,// or false
           resultDisplayDuration: 100
          }

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

Answer 3

Проверьте тип вашего проекта в файле ionic.config.json.

Если тип «ионно-угловой» , то установите версию 4.xx.В вашем случае

npm i -s @ionic-native/barcode-scanner@4.20.0

Если тип «угловой» , то установите версию 5.xx-бета

npm i -s @ionic-native/barcode-scanner@5.0.0-beta.24

Примечание :

Добавлять ngx в конце импорта, только если вы используете Angular 6

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

, если не удалить ngx из импорта какв app.module.ts и app.component.ts

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

Refencence : https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

Answer 4

Попробуйте назначить функцию BarcodeScannerOptions scan.

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

export class HomePage {

  qrOptions: BarcodeScannerOptions;

  constructor(private barcodeScanner: BarcodeScanner) {
    this.qrOptions = { prompt: 'Scan the QR Code to Enter', resultDisplayDuration: 0 };
  }

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