Angular Ionic Capacitor Barcode Scanner Plugin not working on Web

Question

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?

Answer 1

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