Ionic-framework: Update issue with Barcode Scanner

[Klerith]

Ionic version: (check one with "x")
[ ] 1.x
[ x ] 2.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I was using the barcode scanner plugin previously with no issue, but now with the change of ionic-native to @ionic-native, I am facing this issue

First when I try to install the barcodescanner

ionic plugin add phonegap-plugin-barcodescanner // works
npm install --save @ionic-native/barcode-scanner // this throws this error UNMET ERROR

├── @ionic-native/[email protected]
└── UNMET PEER DEPENDENCY @ionic-native/[email protected]

If I continue, on a simple page I have this:

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

constructor( public barcodeScanner: BarcodeScanner ) { } // OK

But is in this moment when I run the code with ionic serve, shows this error. (I know the barcode scanner will not work on desktop, but this issue should not appear.

Steps to reproduce:
Just create an ionic 2 app, add the plugin barcode scanner, then when I try to use it with the new injection mode, on runtime shows "No provider for BarcodeScanner!"

I am using the tutorial from
http://ionicframework.com/docs/v2/native/barcode-scanner/

And I repeat, I was using the barcode scanner before :(

Related code:

My package.json is this:

{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic-native/barcode-scanner": "^3.1.1",
"@ionic-native/core": "3.1.0",
"@ionic-native/splash-screen": "3.1.0",
"@ionic-native/status-bar": "3.1.0",
"@ionic/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "qrapp: An Ionic project"
}

Thank you for any support

[wbhob]

You have to inject it into your NgModule

[Klerith]

@wbhob you are a genios good sr.

Btw, I don't know if this is already somewhere on the ionic documentation, but if someone have the same issue this is what you need inside you @NgModule

Make sure you have this imported
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

In your providers section inside the NgModule

providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Now I can work with the plugin like before.

[wbhob]

I looked it up on stack overflow a couple days ago. It's also in the readme

Wilson Hobbs
CEO/Founder/Developer at Canal
11th Grade at The Lovett School

Personal Information
E-mail: [email protected]
Cell: [phone]
Website: www.wilsonhobbs.com (https://www.wilsonhobbs.com)
Twitter/Instagram/Facebook: @wbhob

Canal Information
E-mail: [email protected]
Web: www.getcanal.com (https://www.getcanal.com/)

Twitter/Instagram/Facebook: @getcanal

On Mar 22, 2017, 1:52 PM -0400, Fernando [e-mail], wrote:
>

@wbhob (https://github.com/wbhob) you are a genios good sr.

Btw, I don't know if this is already somewhere on the ionic documentation, but if someone have the same issue this is what you need inside you @NgModule (https://github.com/NgModule)

Make sure you have this imported
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

In your providers section inside the NgModule

providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Now I can work with the plugin like before.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://github.com/driftyco/ionic/issues/10877#issuecomment-288483636), or mute the thread (https://github.com/notifications/unsubscribe-auth/AEPIEi5u3R3cWt1EJ1QxDBJlD9CqPSz0ks5roV_FgaJpZM4Mlkd9).

[wbhob]

Close issue?

[Klerith]

Yes, it is

[brandyscarney]

The docs for native have been updated here: http://ionicframework.com/docs/v2/native/

You can also take a look at this commit for an example of how we updated the conference app: https://github.com/driftyco/ionic-conference-app/commit/8c394acddca65d85f09c9471b35fba5a446e57f7

And here is the recent blog on it: http://blog.ionic.io/ionic-native-3-x/

If you're still running into issues please visit our forum or slack channel for questions about the framework. :smile: Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.