Hi, I am working on a pwa, would like to use capacitor with the barcode scanner plugin, I installed the plugin with:
ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
Then
npx cap sync
I can build and use the app in my browser without problems, but using the barcode plugin i Get the error Cordova not available
Hello,
best is to show code of implementation to get better help.
Maybe you need /ngx on the end of your import path to use it in capacitor.
Maybe you need to update versions of @ionic/native/whatever to 5.x.x.
Otherwise a native cordova plugin will not work in a pwa and as far as I know there is no pwa element for a barcode scanner.
The camera is available as pwa element, so you can build it maybe by yourself.
Best regards, anna-liebt
Hi , thanks, this is how I import the plugin
import { BarcodeScanner, BarcodeScannerOptions } from ‘@ionic-native/barcode-scanner/ngx’;
the code is updated to 5.0.0
and this is a snipet of my code:
constructor(public info: InfoService,
private barcodeScanner: BarcodeScanner
) {
}
scanCode() {
this.barcodeScanner.scan().then(barcodeData => {
alert('Barcode data ' + JSON.stringify(barcodeData));
this.scannedData = barcodeData;
}).catch(err => {
console.log('Error', err);
this.error = err;
});
}
Best regards, arpho
Hello,
to clarify. A native cordova plugin is never available on browser / pwa.
So if this error is thrown, when you build for device / simulator, you should check correct implementation of capacitor and that cordova is removed fully (If previously installed).
Best regrads, anna-liebt
Hi, I get the same error with the device too
Hello,
can you please post complete app.module.ts ans package.json.
Best regards, anna-liebt
thanks
package.json
{
"name": "pwaBalance",
"version": "0.9.4.4",
"author": "Giuseppe D'Amico",
"features": [
"gestione forme di pagamento",
"gestione fornitori",
"gestione categorie",
"gestione acquisti in progress"
],
"newFeatures": [
"installed barcode Scanner",
"properly installed capacitor"
],
"email": "arphosolutions@gmail.com",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/pwa": "^0.10.6",
"@angular/router": "~7.0.0",
"@angular/service-worker": "~7.0.0",
"@capacitor/cli": "^1.0.0-beta.17",
"@capacitor/core": "^1.0.0-beta.17",
"@ionic-native/barcode-scanner": "^5.0.0",
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/file": "^4.18.0",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic/angular": "4.0.0-beta.16",
"@ionic/storage": "^2.2.0",
"cordova-plugin-file": "^6.0.1",
"core-js": "^2.5.4",
"firebase": "^5.5.0",
"firebase-admin": "^6.0.0",
"hammerjs": "^2.0.8",
"phonegap-plugin-barcodescanner": "^8.0.1",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/architect": "~0.10.0",
"@angular-devkit/build-angular": "^0.11.4",
"@angular-devkit/core": "~7.0.0",
"@angular-devkit/schematics": "~7.0.0",
"@angular/cli": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@ionic/angular-toolkit": "~1.2.0",
"@types/googlemaps": "^3.30.16",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
},
"description": "Balance in version pwa",
"cordova": {
"plugins": {
"cordova-plugin-file": {},
"phonegap-plugin-barcodescanner": {}
}
}
}
app.module.ts
type or paste import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { ItemModule } from '../app/modules/item/item.module';
import { ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';
import { GeoLocationModule } from './modules/geo-location/geo-location.module';
import { DynamicFormModule } from './modules/dynamic-form/dynamic-form.module';
import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
@NgModule({
declarations:
[
AppComponent,
],
entryComponents: [],
imports: [
MatButtonModule,
IonicStorageModule.forRoot(),
MatCheckboxModule,
CommonModule,
BrowserModule,
IonicModule.forRoot(),
ItemModule,
GeoLocationModule,
DynamicFormModule,
AppRoutingModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
ReactiveFormsModule,
BrowserAnimationsModule
],
providers: [
BarcodeScanner,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
HttpClientModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Best Regards, arpho
Hello,
please update all your ionic native to same versions. You can do that, if you change it manually in package.json like
"@ionic-native/whatever": "^5.0.0",
CXheck if you have it done properly and run afterwards on console
npm i
Clear browser cache and run ionic serve again. Does this change anything?
Best regards, anna-liebt
Hi, thanks, I did what you Said, same error
Hi do you think that installing cordova would fix the issue? thanks in advance,
best regards arpho
Hello,
no, do not install codova. All cordova plugins should be supported by capacitor.
Please show package.json, app.module.ts, whatever.module where it is added, and whatever.ts where it is imported.
Best regards, anna-liebt
Hello, this is package.json
{
"name": "pwaBalance",
"version": "0.9.5",
"author": "Giuseppe D'Amico",
"features": [
"gestione forme di pagamento",
"gestione fornitori",
"gestione categorie",
"gestione acquisti in progress"
],
"newFeatures": [
"installato cordova barcode"
],
"email": "arphosolutions@gmail.com",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/pwa": "^0.10.6",
"@angular/router": "~7.0.0",
"@angular/service-worker": "~7.0.0",
"@capacitor/cli": "^1.0.0-beta.17",
"@capacitor/core": "^1.0.0-beta.17",
"@ionic-native/barcode-scanner": "^5.0.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/file": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "4.0.0-beta.16",
"@ionic/storage": "^2.2.0",
"cordova-plugin-barcodescanner": "^0.7.4",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-file": "^6.0.1",
"core-js": "^2.5.4",
"firebase": "^5.5.0",
"firebase-admin": "^6.0.0",
"hammerjs": "^2.0.8",
"phonegap-plugin-barcodescanner": "^8.0.1",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/architect": "~0.10.0",
"@angular-devkit/build-angular": "^0.11.4",
"@angular-devkit/core": "~7.0.0",
"@angular-devkit/schematics": "~7.0.0",
"@angular/cli": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@ionic/angular-toolkit": "~1.2.0",
"@types/googlemaps": "^3.30.16",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
},
"description": "Balance in version pwa",
"cordova": {
"plugins": {
"cordova-plugin-file": {},
"phonegap-plugin-barcodescanner": {}
}
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { ItemModule } from '../app/modules/item/item.module';
import { ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';
import { GeoLocationModule } from './modules/geo-location/geo-location.module';
import { DynamicFormModule } from './modules/dynamic-form/dynamic-form.module';
import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
@NgModule({
declarations:
[
AppComponent,
],
entryComponents: [],
imports: [
MatButtonModule,
IonicStorageModule.forRoot(),
MatCheckboxModule,
CommonModule,
BrowserModule,
IonicModule.forRoot(),
ItemModule,
GeoLocationModule,
DynamicFormModule,
AppRoutingModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
ReactiveFormsModule,
BrowserAnimationsModule
],
providers: [
BarcodeScanner,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
HttpClientModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
info.page.ts
import { Component, OnInit } from "@angular/core";
import { InfoService } from "src/app/services/info/info.service";
import { AlertController } from "@ionic/angular";
import {
BarcodeScanner,
BarcodeScannerOptions
} from "@ionic-native/barcode-scanner/ngx";
@Component({
selector: "app-info",
templateUrl: "./info.page.html",
styleUrls: ["./info.page.scss"]
})
export class InfoPage implements OnInit {
version: string;
appName: string;
email: string;
error: string;
message: string;
features: Array<string> = [];
newFeatures: Array<string> = [];
encodeData: any;
scannedData: {};
barcodeScannerOptions: BarcodeScannerOptions;
constructor(
public info: InfoService,
private barcodeScanner: BarcodeScanner
) {}
scanCode() {
this.barcodeScanner
.scan()
.then(barcodeData => {
alert("Barcode data " + JSON.stringify(barcodeData));
this.scannedData = barcodeData;
})
.catch(err => {
console.log("Error", err);
this.error = err;
});
}
ngOnInit() {
console.log("ciao");
this.info.getPackage().subscribe(data => {
this.version = data["version"];
this.appName = data["name"];
this.email = data["email"];
this.features = data["features"];
this.newFeatures = data["newFeatures"];
this.info.areThereNews().then(v => {
if (v === 1) {
this.message = `grazie per usare ${this.appName}`;
}
if (v === 2) {
this.message = `${this.appName} è stata aggiornata alla versione ${
this.version
}`;
}
this.info.setActualVersion().then(ok => {});
});
});
}
}
info.page is part of a module, should I need to import barcodescanner in that module too?
Best Regards, arpho.
You need to install it Capacitor way:
npm install phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
ionic cap sync