2
votes

Ionic - BarcodeScanner .scan n'est pas une fonction

J'implémente un scanner QRCode dans une nouvelle application construite avec ionic 4.0.6 et j'ai suivi la documentation sur la façon d'intégrer le scanner.

Voici la documentation: https://ionicframework.com/docs/native/barcode-scanner/

Informations ioniques:

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

Voici mon code:

app.modules.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);
       });
  }

}

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>

Et voici le fichier home.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 {}

Comme vous pouvez le voir, il ne fait pas grand-chose, juste un bouton pour appeler la fonction openScanner .
Si je l'exécute sur mon appareil (Android 7), une page vierge s'affiche.
À l'aide des outils de Chrome, j'ai inspecté l'application et je peux voir:

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

En inspectant la bibliothèque, je peux voir la fonction et il y a une documentation sur son utilisation, et le code même que j'ai ajouté dans ma méthode.
Où est l'erreur?


1 commentaires

Vous avez ajouté un plugin en utilisant @beta, ai-je raison?


4 Réponses :


0
votes

Essayez de donner BarcodeScannerOptions à la fonction 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);
       });
  }
}


0 commentaires

0
votes

Essayez ceci ..

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

Et la fonction:

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


0 commentaires

9
votes

Vérifiez le type de votre projet dans le fichier ionic.config.json.

Si le type est "ionic-angular" , installez la version 4.x.x. Dans votre cas

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

Si le type est "angulaire" , installez la version 5.xx-beta

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


1 commentaires

Excellent ..... Fonctionne bien ..... En fait, j'ai passé plus d'heures dans cette numérisation de codes à barres. Maintenant obtenu le résultat de votre réponse ... Merci beaucoup ...



-1
votes

Vérifiez le type de votre projet dans le fichier ionic.config.json.

Si le type est "ionique-angulaire", installez la version 4.x.x. Dans votre cas

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

Si le type est "angulaire", installez la version 5.x.x-beta

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

< gagnantRemarque :

Ajoutez ngx à la fin de l'importation uniquement si vous utilisez Angular 6

importer {BarcodeScanner} depuis '@ ionic-native / barcode-scanner / ngx'; sinon, supprimez ngx de l'importation à la fois dans app.module.ts et app.component.ts

importer {BarcodeScanner} depuis '@ ionic-native / barcode-scanner';

c'est tout ... Profitez de votre codage ...


1 commentaires

C'est juste une copie de l'autre réponse