Barcodescanner & cordova_not_available

cordova
1

Hello, everybody. I am new to Ionic. So, please, bear with me.

I have this app I’m developing where I’ve installed the barcodescanner with these two commands:

ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner

It works perfect with a device connected to the USB port and the command ionic cordova run android -l --host=###.###.###.###

However, whenever I build (ionic build --prod --service-worker) and deploy to firebase I get cordova_not_available whenever I try to use the scan method of my barcodescanner object.

D:\webs\ionic\06-QRScanner>cordova platform list
6.0.0
Installed platforms:
  android 9.0.0
  browser
  ios 6.1.1
Available platforms:
  browser ^6.0.0
  electron ^1.0.0
  windows ^7.0.0

D:\webs\ionic\06-QRScanner>cordova plugin list
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-email-composer 0.9.2 "EmailComposer"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-inappbrowser 4.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-x-toast 2.7.2 "Toast"
cordova-sqlite-storage 5.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
phonegap-plugin-barcodescanner 8.1.0 "BarcodeScanner"

Please, if there is any other info I could provide to make things clearer, tell me so.

Edit: 11/11/2020

D:\webs\ionic\06-QRScanner>ionic info

Ionic:

   Ionic CLI                     : 6.12.1 (C:\Users\emili\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.4.3
   @angular-devkit/build-angular : 0.1002.0
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.2.0
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : 6.0.0, android 9.0.0, browser, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 10 other plugins)

Utility:

   cordova-res : 0.15.2
   native-run  : 1.2.2

System:

   NodeJS : v12.19.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

Steps to reproduce it

ionic start [ProjectName] tabs
ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
ionic cordova platform add android

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

tab1.page.ts

import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  doing: string = "...";
  sliderOptions = {
    allowSlidePrev:false,
    allowSlideNext:false
  };

  constructor(private barcodeScanner: BarcodeScanner) {}

  scan() {
    this.doing = "Starting scan...";

    this.barcodeScanner.scan()
    .then(barcodeData => {
      this.doing = "Barcode data: "+ barcodeData;
      if(!barcodeData.cancelled) {
        this.doing = "Cancelled!"; 
      }
    }).catch(err => {
      this.doing = "Error: "+err;        
     });
  }
}

tab1.page.html

<ion-content [fullscreen]="true">
  <ion-header>
      <ion-toolbar>
          <ion-title slot="start" color="primary">06.2 v1.0.2 {{ this.doing }}</ion-title>
      </ion-toolbar>
  </ion-header>
  <ion-slides [options]="sliderOptions">
      <ion-slide>
          <ion-slide>
              <ion-button (click)="scan()"
                          expand="full"
                          fill="outline"
                          size="large"
                          shape="round">
                  Scan Code
              </ion-button>
          </ion-slide>
      </ion-slide>
  </ion-slides> 
</ion-content>

tab1.page.scss

ion-slides, ion-slide {
    width:100% !important;
    height:100% !important;
}

That is enough for me to get cordova_not_available on the physical device whenever I click on Scan Code, should look like this:

barcode
barcode779×1280 24.3 KB

2

With Ionic and Cordova (or Capacitor) you build native apps that get deployed on a mobile phone (or run on a device emulator), e.g. like you did for testing with the cordova run method.

Just uploading the code to firebase (or any other host) doesn’t work, as there’s no native wrapper, that’s the error message " cordova_not_available.

1 Like
3

I don’t think I understand correctly. I have made the build (ionic build --prod --service-worker) and upload the www folder to firebase. That’s should be enough to get the native wrapper, isn’t it?

Thanks in advance. Best regards,

4

Good day, am still having the same issue, anyone with a solution please assist.