Ionic Native Barcode Scanner "Property 'scan' does not exist on type 'BarcodeScanner'

Ionic Native
1

Hello.
I use:
Ionic Framework 3.2.1
Ionic Native ^2.9.0
Ionic App Scripts 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI 4.1.0
Node: 6.10.3
OS: Windows 10
Navigator Platform Linux aarch64

I’ve recently installed the Barcode-Scanner ionic native plugin. I followed the description step by step. But it does not matter, if i change anything. Everytime, i run “ionic cordova run android -l” to debug on my connected Samsung S7, i get following error message.

image
error_chrome_inspect.png1177×163 8.94 KB

My code looks like the following:

//AppModule.ts
import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';

import {CeviApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {ListPage} from '../pages/list/list';
import {LoginPage} from "../pages/login/login";
import {AddItemPage} from "../pages/add-item/add-item";

import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
import {Auth} from '../providers/auth/auth';
import {HttpModule} from "@angular/http";
import {CreateAccountPage} from "../pages/create-account/create-account";
import {ListServiceProvider} from '../providers/list-service/list-service';
import {Camera, BarcodeScanner} from 'ionic-native';
import {AddItemsServiceProvider} from '../providers/add-items-service/add-items-service';
import {PostDataServiceProvider} from '../providers/post-data-service/post-data-service';
import {ConfigProvider} from '../providers/config/config';
import {GetDataServiceProvider} from '../providers/get-data-service/get-data-service';
import {CityDataProvider} from '../providers/city-data/city-data';
import {CreateAccountSecondPage} from "../pages/create-account-second/create-account-second";
import {ViewItemPage} from "../pages/view-item/view-item";
import { ScannerProvider } from '../providers/scanner/scanner';

@NgModule({
  declarations: [
    HomePage,
    ListPage,
    LoginPage,
    AddItemPage,
    CreateAccountPage,
    CreateAccountSecondPage,
    ViewItemPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(CeviApp),
    HttpModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    HomePage,
    ListPage,
    LoginPage,
    AddItemPage,
    CreateAccountPage,
    CreateAccountSecondPage,
    ViewItemPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Auth,
    ListServiceProvider,
    Camera,
    AddItemsServiceProvider,
    PostDataServiceProvider,
    ConfigProvider,
    GetDataServiceProvider,
    CityDataProvider,
    BarcodeScanner,
    ScannerProvider
  ]
})
export class AppModule {
}


//ListPage.html
    this.barcodeScanner.scan().then((barcodeData) => {
      // Success! Barcode data is here
    }, (err) => {
      // An error occurred
    });
2

Inside your list page you need to make sure that you import the barcode scanner and make it available through the constructor like:

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

constructor(barcodeScanner: BarcodeScanner)

Also your code looks like your are using the old full Ionic Native package, right?

The new approach has all of the plugins in single packages, so perhaps that is also a problem!

Check out the documentation for a full guide how to add the barcode scanner.

2 Likes
3

Thank you. I was using the old package and also forgot it to include. . .