ionic2 .. TypeError: Cannot read property 'query' of null

Question

So I am new in IONIC2 .. I only tried the helloworld and it worked .. and I do have a previous experience with Angular2 and Typescript but no former experience in IONIC.

What I am trying to do is to create a BarcodeScanner with Ionic2 using this link https://adamweeks.com/2016/05/11/creating-a-barcode-scanner-in-ionic-2-in-15-minutes/, however whenever I test on the browser I get the following error in the console

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

I read that some plugins might not work on the browser .. so I tried to deploy on my phone (which I previously managed to do with the helloworld example), however all I was able to see was a white screen.

In my app I have two pages Scanpage, Homepage.

You may find the code below.

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');
    }
}

Answer 1

Change

constructor(platform, navController:NavController) {

to

constructor(platform:Platform, navController:NavController) {

Angulars DI needs a key to know what to inject for each parameter. This can be defined by the static get parameters() ... or by providing types to constructor parameters.