URGENT: Need help with BarcodeScanner Native Plugin!

Ionic Native
1

Hello Ionic World! I’m just getting into mobile development, and you guys have really helped me get started quick! Those docs and the host of guides on youtube are great!

That being said, I have hit a bit of a snag with my first app.

I am attempting to make an asset tracker that makes use of the Ionic Native BarcodeScanner plugin for scanning asset tags. (Aside: I eventually want to link these codes to a database, but I will save that question and it’s subqueries for a separate post in the near future)

I have done my best to link the scan functionality to a button, but whenever I click it in the ionic lab web simulator, it gives me the following error:

TypeError: Unable to get property 'scan' of undefined or null reference
   at HomePage.prototype.ScanBarcode (http://localhost:8100/build/main.js:55816:9)
   at Anonymous function (Function code:236:9)
   at handleEvent (http://localhost:8100/build/main.js:12192:87)
   at callWithDebugContext (http://localhost:8100/build/main.js:13484:9)
   at debugHandleEvent (http://localhost:8100/build/main.js:13072:5)
   at dispatchEvent (http://localhost:8100/build/main.js:9092:5)
   at Anonymous function (http://localhost:8100/build/main.js:9684:13)
   at Anonymous function (http://localhost:8100/build/main.js:33436:9)
   at t.prototype.invokeTask (http://localhost:8100/build/polyfills.js:3:9843)
   at onInvokeTask (http://localhost:8100/build/main.js:4418:21)

When using the Ionic View app, it does not display an error, but does refrain from doing anything useful when I tap the button.

I will paste my code below for your perusal, and I hope to have a reply soon. This app needs to be at least semi-functional by this coming Friday, or I may miss out on an opportunity I really don’t want to lose.

HTML:

<ion-header>
  <ion-navbar color="primary">
    <ion-title text-center>
      SVUIT Asset Tracker App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Click Below to Scan an Asset Tag</h2>
  <!-- Item with a label and content -->
  <ion-item>
    <ion-label>Last Scan:</ion-label>
    <div item-content>
      {{ barcodeData }}
    </div>
  </ion-item>
  <!-- Bind the click event to a method -->
  <button ion-button block color="dark" (click)="ScanBarcode()">
    Scan Barcode
  </button>
</ion-content>

TS

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

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
        barcodeScanner: BarcodeScanner;
    
    constructor(public navCtrl: NavController) {
         
    }
    barcodeData = '';

    ScanBarcode() {
        this.barcodeScanner.scan().then((barcodeData) => {
            // Success! Barcode data is here
            console.log("Barcode Scan Successful: " + barcodeData);
        }, (err) => {
            // An error occurred
            console.error("Scan Unsuccessful: " + err);
        });
    }
}

Thanks guys! Hope you can help me out soon! This is my very first app, and my first experience with Javascript! I’m eager to learn, so any friendly advice is appreciated!

PS- it’s also my first time posting my programming woes on a forum of any kind, so if I’ve done anything unspeakably taboo, please forgive me and tell me how I’ve sinned.

2

You need to inject BarcodeScanner into your class, so move barcodeScanner: BarcodeScanner into your constructor.

3

I will try that again. Last time I did something like that it seemed to mess up the HTML or caused other errors in Typescript. I’ll post my results after I’ve tested it again.

Thanks for the rapid reply!

4

Okay, I got two errors it seems. The first is a runtime error:

Error: Uncaught (in promise): Error: No provider for BarcodeScanner!
Error: No provider for BarcodeScanner!
   at ReflectiveInjector_.prototype._throwOrNull (http://localhost:8100/build/main.js:3048:13)
   at ReflectiveInjector_.prototype._getByKeyDefault (http://localhost:8100/build/main.js:3087:13)
   at ReflectiveInjector_.prototype._getByKey (http://localhost:8100/build/main.js:3019:13)
   at ReflectiveInjector_.prototype.get (http://localhost:8100/build/main.js:2888:9)
   at NgModuleInjector.prototype.get (http://localhost:8100/build/main.js:3856:9)
   at resolveDep (http://localhost:8100/build/main.js:11317:5)
   at createClass (http://localhost:8100/build/main.js:11173:13)
   at createDirectiveInstance (http://localhost:8100/build/main.js:11001:5)
   at createViewNodes (http://localhost:8100/build/main.js:12364:17)
   at createRootView (http://localhost:8100/build/main.js:12269:5)
   at c (http://localhost:8100/build/polyfills.js:3:13529)
   at Anonymous function (http://localhost:8100/build/polyfills.js:3:12891)
   at NavControllerBase.prototype._fireError (http://localhost:8100/build/main.js:43613:13)
   at NavControllerBase.prototype._failed (http://localhost:8100/build/main.js:43601:9)
   at Anonymous function (http://localhost:8100/build/main.js:43656:46)
   at t.prototype.invoke (http://localhost:8100/build/polyfills.js:3:9186)
   at onInvoke (http://localhost:8100/build/main.js:4427:21)
   at t.prototype.invoke (http://localhost:8100/build/polyfills.js:3:9186)
   at r.prototype.run (http://localhost:8100/build/polyfills.js:3:4426)
   at Anonymous function (http://localhost:8100/build/polyfills.js:3:14067)

The second is a typescript error:
Typescript Error
Property ‘scan’ does not exist on type ‘typeof BarcodeScanner’.

The method ‘scan’ is flagged with an error underline in Visual Studio and in the error message within my browser simulation, which I unfortunatly cannot copy and past into the forum.

My altered code is below:

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

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    
    constructor(public navCtrl: NavController, barcodeScanner: BarcodeScanner) {

    }
    barcodeData = '';

    ScanBarcode() {
        BarcodeScanner.scan().then((barcodeData) => {
            // Success! Barcode data is here
            console.log("Barcode Scan Successful: " + barcodeData);
        }, (err) => {
            // An error occurred
            console.error("Scan Unsuccessful: " + err);
        });
    }
}

Any ideas what I can do further?

5

So for the first issue, you’ll have to add BarcodeScanner to your providers in your app module, as seen here: Add Plugins to Your App Module. (Replacing Camera with BarcodeScanner, naturally)

As for the second issue, since you’ve added and injected barcodeScanner into your class, you’ll use this injected instance of the plugin instead of the static class (which your IDE correctly indicates doesn’t work).
So! This means you merely need to do:
this.barcodeScanner.scan()...

1 Like
6

I tried to implement this, but then I got this error when I tried to upload for testing on my phone:


C:\Users\nealj_000\OneDrive\Documents\Visual Studio 2017\Projects\Asset_Tracker>ionic upload
Running app-scripts build:

[21:33:35]  build dev started ...
Error: C:\Users\nealj_000\OneDrive\Documents\Visual Studio 2017\Projects\Asset_Tracker\src\app\main.ts was not found. The "main.dev.ts" and "main.prod.ts" files have been deprecated. Please create a new file "main.ts" containing the content of "main.dev.ts", and then delete the deprecated files.
                            For more information, please see the default Ionic project main.ts file here:
                            https://github.com/driftyco/ionic2-app-base/tree/master/src/app/main.ts


C:\Users\nealj_000\OneDrive\Documents\Visual Studio 2017\Projects\Asset_Tracker>

I don’t think I edited the file it mentions, (main.ts) and I can’t find a main.dev.ts in my files. Any ideas what I might have done wrong?

7

I rebuilt the app from scratch, implemented as instructed, and it worked! I’m now trying to figure out how to do some other things, which I’m assuming should be posted in other threads that might be more appropriate to their individual topics.

Thanks so much!