I am currently building my first Ionic app, which should include a QR-Code scanner.

This is my package.ts

{
  "name": "drink-inc",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/cdk": "^13.3.4",
    "@angular/common": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/fire": "^7.3.0",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@awesome-cordova-plugins/barcode-scanner": "^5.41.0",
    "@capacitor/android": "^3.5.0",
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.5.0",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/angular": "^6.0.0",
    "firebase": "^9.6.11",
    "ngx-cookie-service": "^13.2.0",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.2.3",
    "@angular/compiler": "~13.2.2",
    "@angular/compiler-cli": "~13.2.2",
    "@angular/language-service": "~13.2.2",
    "@capacitor/cli": "3.5.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}

So i wanted to add the Cordova Barcode Scanner Plugin via Capacitor.

At first i installed the plugin, like the guide describes:

$ npm install phonegap-plugin-barcodescanner 
$ npm install @awesome-cordova-plugins/barcode-scanner 
$ ionic cap sync

After that implemented a very basic version of the barcode scanner:

import { Component, OnInit } from "@angular/core";
import { NgForm } from "@angular/forms";
import { BarcodeScanner } from "@awesome-cordova-plugins/barcode-scanner/ngx";

@Component({
  selector: "app-home",
  templateUrl: "./home.page.html",
  styleUrls: ["./home.page.scss"],
})
export class HomePage implements OnInit {
  constructor(
    private barcodeScanner: BarcodeScanner
  ) {}

  joinBarcodeRoom() {
    this.barcodeScanner.scan().then((data) => {
      console.log(data);
    });
  }
}

After that i had to include the BarcodeScanner in the providers Array of my app.component.module and it worked perfectly fine on the android emulator.

Hovewer, running the code in the browser generates the following error:

Native: tried calling BarcodeScanner.scan, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
core.mjs:6485 ERROR Error: Uncaught (in promise): cordova_not_available
    at resolvePromise (zone.js:1262:1)
    at resolvePromise (zone.js:1216:1)
    at zone.js:1329:1
    at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:443:1)
    at Object.onInvokeTask (core.mjs:25535:1)
    at _ZoneDelegate.push.3484._ZoneDelegate.invokeTask (zone.js:442:1)
    at Zone.push.3484.Zone.runTask (zone.js:214:1)
    at drainMicroTaskQueue (zone.js:632:1)
    at ZoneTask.push.3484.ZoneTask.invokeTask [as invoke] (zone.js:529:1)
    at invokeTask (zone.js:1714:1)

Is there a way to fix this error? If I have to include Cordova, isn't that bad for performance?

CodePudding user response：

Since You have added awesome cordova plugin You have to added it to app.module.ts provider array.

import { BarcodeScanner } from "@awesome-cordova-plugins/barcode-scanner/ngx";
...
providers:[BarcodeScanner]

CodePudding user response：

Capacitor doesn’t support cordova plugins on web, only on iOS and Android.