Native barcode scanner installed with capacitor


#1

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


#2

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


#3

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


#4

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


#5

Hi, I get the same error with the device too


#6

Hello,
can you please post complete app.module.ts ans package.json.

Best regards, anna-liebt


#7

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


#8

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


#9

Hi, thanks, I did what you Said, same error


#10

Hi do you think that installing cordova would fix the issue? thanks in advance,
best regards arpho


#11

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


#12

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.