Issue when retrieving data from Firebase using ionic+angularfire2 - ionic-framework

Question

I am following a tutorial to create a Chat application using Ionic and AngularFire2.
However, I am having this error when I am trying to retrieve data from Firebase Database.
TypeError: Object(...) is not a function
at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:74005:76)
at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:62295:27)
at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
at Subject.next (http://localhost:8100/build/vendor.js:23237:25)
at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
at Notification.observe (http://localhost:8100/build/vendor.js:51893:50)
at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76316:40)
My Chat.TS code
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
/**
* Generated class for the ChatPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-chat',
templateUrl: 'chat.html',
})
export class ChatPage {
username: string = '';
message : string = '';
//messages : object[] = [];
items: Observable<any[]>;
constructor(public db: AngularFireDatabase , public navCtrl: NavController, public navParams: NavParams) {
console.log(this.navParams);
this.username = this.navParams.get('username');
this.items = db.list('chat').valueChanges();
}
ionViewDidLoad() {
console.log('ionViewDidLoad ChatPage');
}
sendMessage(){
this.db.list('/chat').push({
username:this.username,
message:this.message
});
}
}
My Chat.HTML code
<ion-header>
<ion-navbar>
<ion-title>Chat</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ul>
<li *ngFor="let item of items | async">
{{ item | json }}
</li>
</ul>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-input type="text" [(ngModel)]="message"></ion-input>
<button ion-button icon-only (click)="sendMessage()"><ion-icon name="send"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
I had tried many different ways of doing it and I still get the same object error.
Anyone have any idea what is causing this error?
Thanks for your help.