Angular 和 Firebase

Question

我正在尝试使用 Angular 和 Firebase 制作一个项目。我已经使用 cli 命令“npm install firebse angularfire2 --save”安装了 firebase。当我导入 FirebaseListObservable 时出现错误。 import { Injectable } from '@angular/core'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { FirebaseListObservable } from 'angularfire2/database'; 这是一项服务。 这是组件文件。

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';

export const firebaseConfig = {
    apiKey: "AIzaSyD8cYGy1sth5-BPkcB_yksZdZWQkcAnpXk",
    authDomain: "clientpanel-9f785.firebaseapp.com",
    databaseURL: "https://clientpanel-9f785.firebaseio.com",
    projectId: "clientpanel-9f785",
    storageBucket: "clientpanel-9f785.appspot.com",
    messagingSenderId: "296835281822"
}
import * as firebase from 'firebase/app';


@NgModule({
  declarations: [
    AppComponent,
    AddClientComponent,
    ClientDetailsComponent,
    NavbarComponent,
    SidebarComponent,
    PageNotFoundComponent,
    ClientsComponent,
    DashboardComponent,
    EditClientComponent,
    LoginComponent,
    RegisterComponent,
    SettingsComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [
    ClientService,
    AngularFireAuth,
    AngularFireDatabase
  ],
  bootstrap: [AppComponent]
})

Answer 1

试试

import { AngularFireList } from 'angularfire2/database';

而不是

import { FirebaseListObservable } from 'angularfire2/database';

您使用哪个版本？在 AngularFire 5.0 中 FirebaseListObservable 被移除

Answer 2

  providers: [
    ClientService,
    AngularFireAuth, // Delete
    AngularFireDatabase // Delete
  ],

您不要在 AppModule 中使用 AngularFireAuth 和 AngularFireDatabase。您在服务或组件中使用它们，如下所示：

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

export class AppComponent {
    public books: FirebaseListObservable<Book[]>;
    constructor(db: AngularFireDatabase) {
        this.books = db.list('/books');
    }
}

阅读this教程了解更多信息

更新

我不知道您使用的版本，但如果您使用的是 AngularFire v5，请遵循 answer

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';