ionic2 .. TypeError：无法读取属性'query'的null

所以我是IONIC2的新手 . 我只尝试了helloworld并且它有效..我之前有过使用Angular2和Typescript的经验，但之前没有IONIC的经验 .

我想要做的是使用此链接https://adamweeks.com/2016/05/11/creating-a-barcode-scanner-in-ionic-2-in-15-minutes/创建一个带Ionic2的BarcodeScanner，但无论何时我在浏览器上测试，我都会在控制台中收到以下错误

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null

我读到一些插件可能无法在浏览器上运行..所以我尝试在我的手机上部署（我以前设法用helloworld示例），但是我能看到的只是一个白色的屏幕 .

在我的应用程序中，我有两页 Scanpage ， Homepage .

您可以在下面找到代码 .

Home.html

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello World
      <button block (click)="scan()">Scan</button>
    </ion-card-content>
  </ion-card>
</ion-content>

Home.ts

import {Page, Platform, Alert, NavController, Toast} from 'ionic-angular';
import {BarcodeScanner} from 'ionic-native';
import {BarcodeData} from '../../classes/BarcodeData.ts';
import {ScanPage} from '../scanResult/scan';  


@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  // static get parameters() {
  //       return [[Platform], [NavController]];
  //   }
  platform:Platform;
  navController:NavController;

    constructor(platform, navController:NavController) {
        console.log('hello');
        this.platform = platform;
        this.navController = navController;
    }

  scan() {
        BarcodeScanner.scan().then(
          (result) => {
            console.log('result');
            console.log(result);
            if (!result.cancelled) {
              const barcodeData = new BarcodeData(result.text, result.format);
              this.scanDetails(barcodeData);
            }
            return Promise.resolve(result);
          })
        .catch((err) => {
          let toast = Toast.create({
            message: 'Mmmm, buttered toast',
            duration: 3000
          });

          this.navController.present(toast);
          return Promise.reject(err);
        })
    }

  scanDetails(details) {
    this.navController.push(ScanPage, {details: details});
  }
}

scan.html

<ion-list-header>Barcode</ion-list-header>
<ion-item>
{{ barcodeData.text }}
</ion-item>
<ion-list-header>Format</ion-list-header>
<ion-item>
{{ barcodeData.format }}
</ion-item>

scan.ts

import {Page, Platform, Alert, NavController, NavParams} from 'ionic-angular';
import {BarcodeData} from '../../classes/BarcodeData.ts';


@Page({
  templateUrl: 'build/pages/scanResult/scan.html'
})
export class ScanPage{
    barcodeData: BarcodeData;

    constructor(private nav: NavController, navParams: NavParams) {
        this.barcodeData = navParams.get('details');
    }
}