I'm following this tutorial to set up a chat room application in Angular and I'm having problems with setting up AngularFire2.
I noticed that in package.json file hes using 4.0.0-rc.1 so I changed mine version from "angularfire2": "^5.0.0-rc.4" to "angularfire2": "^4.0.0-rc.1"
Now my chat.service.ts imports look like this
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';
import { ChatMessage } from '../models/chat.message.model';
However I was getting the following error on the FirebaseListObservable import
When I googled this error I came across this post on github which suggests using angularfire2/database-deprecated. I did this and my project now compiles without any error. However, when I now navigate to localhost:4200/chat it redirects my app to http://localhost:4200/ and I get the following error in my console
When I google this error the top result is this SO post which tells me that AngularDatabase has been separated into its own module. But I'm confused about how to fix my issue. Am I copying his entire example into my app.module.ts file? Where am I getting this AngularFireModule api key from?
I want to follow along as closely as possible with the tutorial and my app.module.ts matches exactly what the github tutorial has as well as the exact same chat.service.ts file with the exception that mine has 'angularfire2/database-deprecated' instead of 'angularfire2/database' . Where do I go from here? Here is my full app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { ChatFormComponent } from './chat-form/chat-form.component';
import { ChatRoomComponent } from './chat-room/chat-room.component';
import { MessagesFeedComponent } from './messages-feed/messages-feed.component';
import { MessageComponent } from './message/message.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { NavigationComponent } from './navigation/navigation.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserItemComponent } from './user-item/user-item.component';
import { ChatService } from './services/chat.service';
import { AuthService } from './services/auth.service';
import { appRoutes } from '../routes';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent,
ChatFormComponent,
ChatRoomComponent,
MessagesFeedComponent,
MessageComponent,
LoginComponent,
SignupComponent,
NavigationComponent,
UserListComponent,
UserItemComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule,
AngularFireModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
AngularFireModule.initializeApp(environment.firebase)
],
providers: [AuthService, ChatService],
bootstrap: [AppComponent]
})
export class AppModule { }
and my chat service file
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';
import { ChatMessage } from '../models/chat.message.model';
@Injectable()
export class ChatService {
user: any;
chatMessages:FirebaseListObservable<ChatMessage[]>;
chatMessage: ChatMessage;
userName: Observable<string>
constructor(
private db: AngularFireDatabase,
private afAuth: AngularFireAuth
) {
this.afAuth.authState.subscribe(auth =>{
if(auth !== undefined && auth !== null){
this.user = auth;
}
})
}
sendMessage(msg: string){
const timestamp = this.getTimeStamp();
const email = this.user.email;
this.chatMessages = this.getMessages();
this.chatMessages.push({
message: msg,
timeSent: timestamp,
userName: this.userName,
email: email
});
console.log('called sendMessage()!');
}
getTimeStamp(){
const now = new Date();
const date = now.getUTCFullYear() + '/' + (now.getUTCMonth() + 1) + '/' + now.getUTCDate();
const time = now.getUTCHours() + ':' + now.getUTCMinutes() + ':' + now.getUTCSeconds();
return (date + ' ' + time);
}
getMessages(): FirebaseListObservable<ChatMessage[]>{
return this.db.list('messages', {
query: {
limitToLast: 25,
orderByKey: true
}
})
}
}
