Angular - Error while Fetching data from Firebase

Question

The task of this app is to get data from firebase database and show it on the console.

I am trying to fetch data from Firebase database but getting error in Console. I have used an external library called angularFire2.

This is app.module.ts file:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes} from "@angular/router";
    import { HttpModule } from '@angular/http';
    //AngularFire Imports
    import { AngularFireModule} from 'angularfire2';
    import { AngularFireDatabase} from 'angularfire2/database';
    import { AngularFireAuth } from "angularfire2/auth";

    //Component Imports
    import { AppComponent } from './app.component';
    import { DashboardComponent } from './components/dashboard/dashboard.component';
    import { ClientsComponent } from './components/clients/clients.component';
    import { ClientDetailsComponent } from './components/client-details/client-details.component';
    import { AddClientComponent } from './components/add-client/add-client.component';
    import { EditClientComponent } from './components/edit-client/edit-client.component';
    import { NavbarComponent } from './components/navbar/navbar.component';
    import { SidebarComponent } from './components/sidebar/sidebar.component';
    import { LoginComponent } from './components/login/login.component';
    import { RegisterComponent } from './components/register/register.component';
    import { SettingsComponent } from './components/settings/settings.component';
    import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
    //Service Imports
    import { ClientService} from './services/client.service'

    const appRoutes: Routes = [
      {path:'', component: DashboardComponent},
      {path:'register', component: RegisterComponent},
      {path: 'login', component: LoginComponent}
    ];

    export const firebaseConfig = {
      apiKey: "AIzaSyBMDX4P41-HpeupjjNgBYY2SeE1IA6I",
      authDomain: "clientpanel-7fc90.firebaseapp.com",
      databaseURL: "https://clientpanel-7fc90.firebaseio.com",
      storageBucket: "clientpanel-790.appspot.com",
      messagingSenderId: "175372806702"
    }

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

client.service.ts file.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { Observable } from 'rxjs';
import { Client } from '../models/Client';

@Injectable()
export class ClientService {
  clients: FirebaseListObservable<any[]>;
  client: FirebaseObjectObservable<any>;

  constructor(
    public af:AngularFireDatabase
  ) { 
    this.clients = this.af.list('/clients') as FirebaseListObservable<Client[]>;
  }

  getClients(){
    return this.clients;
  }

}

clients.component.ts file

import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
  clients:Client[];

  constructor(
    public clientService:ClientService
  ) { }

  ngOnInit() {
    this.clientService.getClients().subscribe(clients => {
      this.clients = clients;
      console.log(this.clients);
    });
  }

}

Error that I am Getting in my console

Answer 1

It looks like you've missed adding the service provided for AngularFireDatabase In app.module.ts, due to which angular isn't able to find the service. Can you please share your app.module.ts file?