Angular2 No provider for AngularFireDatabase injection error

Question

I have tried to follow the Angular2 setup steps to the letter, but am having a bit of trouble with an error in the console:

ERROR Error: Uncaught (in promise): Error: No provider for AngularFireDatabase!

sign-in.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SignInComponent } from './sign-in.component';
import { AngularFireModule } from 'angularfire2';
import { fireBaseEnvironment } from '../environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'), // imports firebase/app needed for everything
    AngularFireDatabaseModule, // imports firebase/database, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
  ],
  declarations: [ SignInComponent ],
  bootstrap: [ SignInComponent ]
})
export class SignInModule {}

sign-in.component.ts

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

@Component({
  selector: 'sign-in',
  template: `
    <p> Hi, this is the sign in bits jimmy</p>
    <p>Click this to go to another place <a [routerLink]=" ['../detail'] " >Detail</a>
    <ul>
      <li class="text" *ngFor="let item of items | async">
        {{item.$value}}
      </li>
    </ul>
  `
})

export class SignInComponent {
  public jimmy: 'testing';
  public items: FirebaseListObservable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('/items');
  }
}

Any ideas lovely people?

score 0 · Answer 1 · answered May 07 '17 at 12:42

AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name')

The variable 'FireBaseEnvoriment' contains the data of the firebase,it does not need the

.firebase

, then would be to look like this:

AngularFireModule.initializeApp(fireBaseEnvironment, 'my-app-name')

score 0 · Answer 2 · answered May 12 '17 at 18:56

You are getting that error because in v.4.0 you need to put all modules for data base and auth with the configuration see from line 8

      `
            import { AngularFireModule } from 'angularfire2';
            import { AngularFireDatabaseModule } from 
                                                     'angularfire2/database';
            import { AngularFireAuthModule } from 'angularfire2/auth';
            @NgModule({
              imports: [
                BrowserModule,
                BrowserAnimationsModule,
                AppRoutingModule,
                BsDropdownModule.forRoot(),
                TabsModule.forRoot(),
                ChartsModule,
                AngularFireModule.initializeApp(environment.firebase),
                AngularFireDatabaseModule,
                AngularFireAuthModule
              ],
              declarations: [
                AppComponent,
                FullLayoutComponent,
                SimpleLayoutComponent,
                ChatLayoutComponent,
                NAV_DROPDOWN_DIRECTIVES,
                BreadcrumbsComponent,
                SIDEBAR_TOGGLE_DIRECTIVES,
                AsideToggleDirective
              ],
              providers: [{
                provide: LocationStrategy,
                useClass: HashLocationStrategy
              }],
              bootstrap: [AppComponent]
            })`

what if I have 2 firebase databases ? that's why I need 2 providers. I can't initiate 2 config files in the app.module.ts — user2243952, Jun 07 '17 at 13:14
Also note here we no longer provide a custom FirebaseApp name with initializeApp. — Leo, Jun 07 '17 at 19:20

score 0 · Answer 3 · answered Oct 04 '17 at 07:13

Now Angular library Upgrading to AngularFire 5.0

check on this site https://github.com/angular/angularfire2/blob/HEAD/docs/version-5-upgrade.md

items: Observable<any[]>;



constructor(af: AngularFireDatabase) {


af.list('/Items').valueChanges().subscribe(console.log);


 }

score -2 · Answer 4 · edited May 08 '17 at 16:21

-2

Add the AngularFireDatabaseProvider to providers and not as the module for initialize, because it is a provider:

imports: [
    ... ,
    AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'),
    ...
]
provider: [
    AngularFireDatabaseProvider, 
    AngularFireAuthProvider
]

edited May 08 '17 at 16:21

Harry Lincoln

614
2
9
30

answered May 07 '17 at 03:44

user7975062

1
1

The documentation does not mention providers in this context. You also have syntax errors in your code, btw. – Harry Lincoln May 07 '17 at 10:08
1

The documentation does not mention, but I had the same error using ionic2 with angularfire2 and I solved it that way. I did not want to put code, it was just to understand what the error was. – user7975062 May 07 '17 at 12:35
@ALL this has been already answered [here](http://stackoverflow.com/questions/43772474/no-provider-for-angularfiredatabase/43844301#43844301) – Sunil Kumar May 08 '17 at 09:44

Angular2 No provider for AngularFireDatabase injection error

4 Answers4