CODEWITHSUNDEEP
angularionic2
cantona_7
cantona_7

Reputation: 1177

How to resolve a blank white screen error in Ionic2 app?

I have developed an app to scan to barcode/qr code. I would like to add a feedback page (once I scan the qr code, I would like to see the result in next page). The scan function works fine and I have generated a page to get feedback but once I add this page and i was getting an runtime error.

But with help from Stack Overflow, I solved it. App is successfully built and no runtime error as well. But now I am just getting a blank white screen in ionic serve. How can I solve that?

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

 }
 }

Upvotes: 0

Views: 1109

Answers (1)

Tanmay Patil
Tanmay Patil

Reputation: 699

In Chrome browser, open developer Tools (ctrl + shift + I). Check errors in console. I was also getting blank page. Problem was due to missing provider.

In providers array, barCodeScanner entry was missing.

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

Upvotes: 1

Related Questions