Angular 4: Error: No provider for AngularFireDatabase

Question

I've tried the solutions of this post but none of them worked. I'm using version 4 and in a very similar project a few weeks ago this code was running, but now I get this console error when trying to fetch data:

Error: No provider for AngularFireDatabase!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at _createClass (core.es5.js:9529)
at _createProviderInstance$1 (core.es5.js:9503)
at resolveNgModuleDep (core.es5.js:9488)

This is my service.ts

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

@Injectable()
export class UserService {

 users: FirebaseListObservable<any[]>;
  user: FirebaseObjectObservable<any>;

  constructor(public af:AngularFireDatabase) { 

    this.users = this.af.list('/users') as FirebaseListObservable<User[]>;
  }

  getUsers(){
    console.log(this.user);
    return this.user;
  }

}

The component that receives data:

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { User } from '../../models/users';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss']
})
export class BodyComponent implements OnInit {
  user:User;

  constructor(public userService:UserService) { 

  }

  ngOnInit() {
    this.userService.getUsers().subscribe(users => {
      this.user = users;

    });

  }

And the app.module.ts...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { BodyComponent } from './components/body/body.component';
import { FormsModule }   from '@angular/forms';
import { PlaygroundComponent } from './components/playground/playground.component';

// AngularFire Imports

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

import { UserService } from './services/user.service';

const appRoutes: Routes = [
  {path:'', component:BodyComponent}
];

export const firebaseConfig = {
  apiKey: "AIzaSyD3KWZMx0ZJpZxXMCqtIrP-VvXE1SgXZoA",
  authDomain: "myfirstproject-d1c75.firebaseapp.com",
  databaseURL: "https://myfirstproject-d1c75.firebaseio.com",
  storageBucket: "myfirstproject-d1c75.appspot.com",
  messagingSenderId: "1027141777108"
}




@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    BodyComponent,
    PlaygroundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule

  ],
  providers: [
    AngularFireAuth,
    AngularFireDatabase,
    UserService

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I would really apreciate if someone could tell me what is missing here. The app compiles but then I get a white screen and the errors in the console instead of the array of users...Thanks!

Sajeetharan · Answer 1 · 2017-10-22T19:53:48.257

0

Just remove it from the providers and import inside your component,

 providers: [
   // AngularFireAuth,
   // AngularFireDatabase,
    UserService
  ],

EDIT

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule

  ]

edited Oct 22 '17 at 19:53

answered Oct 22 '17 at 19:28

Sajeetharan

216,225
63
350
396

i did like this (and removed them from the providers `import { Component, OnInit } from '@angular/core'; import { UserService } from '../../services/user.service'; import { User } from '../../models/users'; import { AngularFireDatabase } from 'angularfire2/database'; import { AngularFireAuth } from 'angularfire2/auth';`, but the error persists... – Mellville Oct 22 '17 at 19:37
Try adding AngularFireAuthModule – Sajeetharan Oct 22 '17 at 19:53
strange, what is the version – Sajeetharan Oct 22 '17 at 20:07
Angular? it's 4 – Mellville Oct 22 '17 at 20:07
hmm strange, you are definitely misisng something, just go through this https://raw.githubusercontent.com/pradnyaborkar90/Online-Note-Maker/1cf1ad02f0b4287c88a98b5c4907d3a6e9498537/app/technical/technical.module.ts – Sajeetharan Oct 22 '17 at 20:23

Angular 4: Error: No provider for AngularFireDatabase

1 Answers1