角度和Firebase

Question

我正在尝试使用角度和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

  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';

Answer 2

尝试

import { AngularFireList } from 'angularfire2/database';

代替

import { FirebaseListObservable } from 'angularfire2/database';

您使用哪个版本？在AngularFire 5.0中，FirebaseListObservable已删除