【发布时间】：2018-06-29 09:56:57
【问题描述】：
我正在关注tutorial 在 Angular 中设置聊天室应用程序，但在设置 AngularFire2 时遇到问题。
我注意到package.json file 使用4.0.0-rc.1，所以我将我的版本从"angularfire2": "^5.0.0-rc.4" 更改为"angularfire2": "^4.0.0-rc.1"
现在我的 chat.service.ts 导入看起来像这样
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';
但是我在 FirebaseListObservable 导入时遇到以下错误
当我用谷歌搜索这个错误时，我遇到了this post on github，它建议使用angularfire2/database-deprecated。我这样做了，我的项目现在编译没有任何错误。但是，当我现在导航到 localhost:4200/chat 时，它会将我的应用程序重定向到 http://localhost:4200/ 并且我在控制台中收到以下错误
当我用谷歌搜索这个错误时，最上面的结果是this SO post，它告诉我 AngularDatabase 已被分离到它自己的模块中。但我对如何解决我的问题感到困惑。我是否将他的整个示例复制到我的app.module.ts 文件中？我从哪里得到这个 AngularFireModule api 密钥？
我想尽可能紧跟本教程，我的 app.module.ts 与 github tutorial has 以及完全相同的 chat.service.ts file 完全匹配，除了我的 'angularfire2/database-deprecated' 而不是 'angularfire2/database' .我从这里去哪里？这是我完整的 app.module.ts 文件
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 { }
还有我的聊天服务文件
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
}
})
}
}
【问题讨论】：
-
修改import语句为
AngularFireDatabaseModule.forRoot()
标签： angular angularfire2