如何解决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(。在控制台中检查错误。我也得到了空白页。问题是由于缺少提供商。

在提供程序数组中，缺少条形码扫描仪条目。

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 {}