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?
4 Réponses :
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);
});
}
}
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';
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';
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 ...
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 ...
C'est juste une copie de l'autre réponse
Vous avez ajouté un plugin en utilisant @beta, ai-je raison?