Angular and Firebase

Question

I am trying to make a project on angular and with firebase. I have installed firebase using cli command "npm install firebse angularfire2 --save". When I am importing FirebaseListObservable I am getting an error. import { Injectable } from '@angular/core'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { FirebaseListObservable } from 'angularfire2/database'; This is a service. Here is the Component file.

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]
})

No imported membor FirebaseListObservable in 'databse/index' — Tirth Trivedi, Jun 01 '18 at 06:16
you should at least remove `AngularFireAuth, AngularFireDatabase` from the providers list. These are provided through the imports. Also the `import * as firebase from 'firebase/app';` is unnecessary — Poul Kruijt, Jun 01 '18 at 06:16
Which rxjs version you have and which version of firebase and angularfire2 — Benjamin Schröder, Jun 01 '18 at 07:14

Tony · Answer 1 · 2018-06-01T08:27:14.347

0

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

You dont use AngularFireAuth and AngularFireDatabase in AppModule. You use them in your services or components, something like this:

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

Read this tutorial for more information

Update

I don't know with version you are using but follow this answer, if you using AngularFire v5

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

edited Jun 01 '18 at 08:27

answered Jun 01 '18 at 06:20

Tony

1,106
1
10
17

I tried that but still getting the error.Is there any way to upgrade firebase2 version using cli – Tirth Trivedi Jun 01 '18 at 06:41
{ "resource": "/e:/Angular/clientpanel/src/app/app.component.ts", "owner": "typescript", "code": "2305", "severity": 8, "message": "Module '\"e:/Angular/clientpanel/node_modules/angularfire2/database/index\"' has no exported member 'FirebaseListObservable'.", This is the problem I am getting. – Tirth Trivedi Jun 01 '18 at 06:45
@TirthTrivedi `npm install angularfire2@latest --save` or unintall angularfire2 `npm uninstall angularfire2 --save` and install version you want `npm install angularfire2@versionyouwant --save` – Tony Jun 01 '18 at 08:41

score 0 · Accepted Answer · answered Sep 28 '18 at 16:02

0

try

import { AngularFireList } from 'angularfire2/database';

instead of

import { FirebaseListObservable } from 'angularfire2/database';

Which version do you use? In AngularFire 5.0 FirebaseListObservable is removed

answered Sep 28 '18 at 16:02

Bilguun Nyamaa

31
2

Angular and Firebase

2 Answers2