Barcode Scanner with Ionic 3 docs

Ionic Framework ionic-v3
1

As part of upgrading to Ionic 3 (from Ionic 3) I’ve been trying to make everything conform to the documentation.

In my earlier working version, I used the barcode scanner like this:

import { BarcodeScanner } from 'ionic-native';

// Nothing in the constructor parameters

// In the code:
BarcodeScanner.scan({resultDisplayDuration: 0}).then((barcodeData) => {`

Now, based upon the docs, I’ve changed it to:

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

// Constructor parameter:
barcodeScanner: BarcodeScanner,

// In the code:
this.barcodeScanner.scan({resultDisplayDuration: 0}).then((barcodeData) => {`

There are no syntax or other errors flagged, but when I run it and I go to navigate to the page this has the above code in it, I get:

Failed to navigate: No provider for BarcodeScanner!
ERROR Error: Uncaught (in promise): Error: No provider for BarcodeScanner!`

Any suggestions? BTW, even with the Ionic 3 upgrade, the original way still works.

Thanks,
Michael

2

Read the docs again. You forgot to declare it as a provider in your app module.

3 Likes
3

Yes, that was it. Thank you. The doc page Barcode Scanner really should include this detail in the Usage section; even just a one line reference to another page (since this is needed for other plugins too). I think people go to those pages to see a quick listing of all that is needed to use the plugin - at least for a simple use case. To show the commands to install it and the usage including the import, but then to not mention that app.module.ts also needs to be updated is to miss the mark on quick reference documentation.

1 Like
4

Could you please have a look at this link? @rapropos?
Or anyone else can help?
I checked the doc and nothing there about this, and the error really confused me.

5

I had the same error, and while declaring it in the providers array I got an error:

image

The problem was the auto-imported Barcode Scanner:

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

At the end of the path there is ngx missing!

This works:

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