no provider for BarcodeScanner

Question

The code is as follows:

    import { Component } from '@angular/core';
    import { NavController, Platform } from 'ionic-angular';
    import { TranslateService } from '@ngx-translate/core';
    import { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

        }
        //Switch language 
       changelanguage() {
            let browserLang = this.translate.currentLang;
            this.translate.use(browserLang.match(/en/) ? 'zh' : 'en');
        }
        //Scan test
        ScanCode() {
            this.barcodeScanner.scan()
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => {
                    alert(error);
                });
        }
    }

Error Picture:

Reference：https://ionicframework.com/docs/native/barcode-scanner/

new questions arose:
According to Suraj recommendations, the prompt "plugin_not_installed"

Error Picture:

development environment: Visual Studio 2017

Answer 1

You need to set the scanner as provider in app.module.ts

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

@NgModule({
  ...

  providers: [
    ...
    BarcodeScanner
    ...
  ]
  ...
})
export class AppModule { }

Reference: Add Plugins to Your App's Module here

UPDATE: From your package.json it looks like you have installed older ionic-native - 2.4.1.Remove it and do:

npm install --save @ionic-native/core