title: angularfire2 can not read property 'displayName' of null
body: <p>I am trying to process authentication using angularfire2. The <a href="https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md" rel="nofollow noreferrer">angularfire2 document in github</a> uses the Observable variable to get the current user's name. In the initial state when the user is not logged in, an error such as <code>Can not read property 'displayName' of null</code> appears. I'm curious to know what to do if you are not currently logged in.</p>
  
  <p><a href="https://i.stack.imgur.com/Lxt5W.png" rel="nofollow noreferrer">this is my Error Console</a></p>
  
  <p>And this is my code</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  
  import { Observable } from 'rxjs/Observable';
  import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
  import { AngularFireAuth } from 'angularfire2/auth';
  
  import * as firebase from 'firebase/app';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
    user: Observable&lt;firebase.User&gt;;
    items: FirebaseListObservable&lt;any[]&gt;;
  
    userName: string;
  
    constructor(public navCtrl: NavController, private afAuth:    AngularFireAuth, private db: AngularFireDatabase) {
      this.user = afAuth.authState;
      this.items = db.list('items');
  
      this.user.subscribe((user: firebase.User) =&gt; {
        this.userName = user.displayName;
        console.log(`[constructor]userName : ${this.userName}`);
      });
    }
  
    login() {
      this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }
    logout() {
       this.afAuth.auth.signOut();
    }
  }
  </code></pre>