Search code examples
ionic-frameworkfirebasefirebase-realtime-databaseionic2

ionic 2 angular 2 - Why does it show a blank screen?


enter image description here

enter image description here

I'm following this tutorial and when I run the code everything works smoothly except Home Page. After Login the home page is not displaying and browser console displaying error:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'parameters' of undefined

Code:

import {LoginPage} from './pages/login/login';
import {HomePage} from './pages/home/home';
import * as firebase from 'firebase';
import {Component} from '@angular/core';
import {ionicBootstrap, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';

@Component({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {
    rootPage: any;

    constructor(platform: Platform) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();
        });

        // Initialize Firebase
        var config = {
            apiKey: "*********",
            authDomain: "*********",
            databaseURL: "*********",
            storageBucket: "********"
        };
        firebase.initializeApp(config);

        //an observer for the user object. By using an observer, 
        //you ensure that the Auth object isn’t in an intermediate 
        //state—such as initialization—when you get the current user. 
        firebase.auth().onAuthStateChanged((user) => {
            if(user) {
                //console.log(user);
                //If there's a user take him to the Home page.
                this.rootPage = HomePage;
                //this.rootPage = LoginPage;
                //console.log(user);
            } else {
                //If there's no user logged in send him to the Login page
                this.rootPage = LoginPage;
            }
        });
    }
}

ionicBootstrap(MyApp);

Solution

  • import {Component} from '@angular/core';
    import {Platform, ionicBootstrap} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {HomePage} from './pages/home/home';
    import {LoginPage} from './pages/login/login';
    import * as firebase from 'firebase';