如何解決Ionic2應用程序中的空白白屏錯誤？

Question

我開發了一個可以掃描到條形碼/二維碼的應用程序。 我想添加一個反饋頁面（一旦我掃描了二維碼，我想在下一頁中看到結果）。 掃描功能可以正常工作，並且我已經生成了一個頁面來獲取反饋，但是一旦添加了該頁面並且出現了運行時錯誤。

但是在Stack Overflow的幫助下，我解決了它。 應用已成功構建，也沒有運行時錯誤。 但是現在我在離子發球區只得到了一個空白的白屏。 我該如何解決？

Home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Platform} from 'ionic-angular';
import {BarcodeScanner} from 'ionic-native';
import {ScannedPage} from '../scanned-page/scanned-page';

@Component({
templateUrl: 'home.html'
})
export class HomePage {
private barcodeText:String;
private barcodeFormat:String;
private platform:Platform;
private navController:NavController;

constructor(public navCtrl: NavController,platform:Platform) {
this.platform = platform;
this.navController = navCtrl;
}
scanningDone(data){
this.navController.push(ScannedPage, {data: data});
}

doScan(){
    console.log('scannig product barcode');
    this.platform.ready().then(() => {
    BarcodeScanner.scan().then((result) => {
    if (!result.cancelled) {
    this.barcodeText = result.text;
    this.barcodeFormat = result.format;
                                    this.scanningDone({'text':result.text,'format':result.format});

                            }
     }, 
     (error) => {
     console.log('error when scanning product barcode');

        });

    });
   }
   }

Scannedpage.ts

   import { Component } from '@angular/core';
   import { NavController,NavParams } from 'ionic-angular';
   import { HomePage } from '../../pages/home/home'

    @Component({
    templateUrl: 'scanned-page.html'
    })
    export class ScannedPage  {

    rootpage = HomePage;
    private bcData;
    constructor(private navCtrl: NavController,navParams: NavParams) {
    this.bcData = navParams.get('data');

 }
 }

Answer 1

在Chrome瀏覽器中，打開開發人員工具（Ctrl + Shift + I）。 在控制台中檢查錯誤。 我也得到空白頁。 問題是由於缺少提供者。

在提供程序數組中，缺少barCodeScanner條目。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,

    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}