No provider for AngularFireDatabase, AngularFireAuth

Question

Apologies as I can't think of a better way of including all the information... When I run this, I get an error saying the following. I've followed the Ionic Docs to the T, I can't figure out what could possibly be wrong.

Error:

No provider for AngularFireDatabase!

Package.json

App.module.ts

Home.html

Home.ts

Castanets

Don't share pictures of text please. Instead share the text and use Stack Overflow/Markdown's formatting option to format it (cmd/ctrl K is your friend here). – Continual

Answer 1

AngularDatabase(same for AngularAuth) is separated to its own module AngularFireDatabaseModule(AngularFireAuthModule for AngularAuth) from version [email protected], see documentation here.

you should import AngularFireDatabaseModule(AngularFireAuthModule for Authentication) in your RootModule.

import { AngularFireModule } from 'angularfire2';
// for AngularFireDatabase
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
// for AngularFireAuth
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireAuth } from 'angularfire2/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp({         <---- main module
      apiKey: ...,
      authDomain: '...',
      databaseURL: '...',
      storageBucket: '...',
      messagingSenderId: '...'
    }),                                       
    AngularFireDatabaseModule,                <---- for database 
    AngularFireAuthModule                     <---- for auth
  ]
})

Crossstitch

Okay, I did this, got rid of all errors (great!) However, it is still not reading the information fro Firebase? – Castanets

@Castanets maybe there is something wrong with your firebase's config. I just updated one of my example project from [email protected]+ to [email protected]+, and see it works well. – Crossstitch

just one more info, i got the same error, since my import was wrong import {AngularFireDatabase} from 'angularfire2/database-deprecated'; ... didn´t really read what my IDE suggested me :) – Hachmin

got an error that FirebaseObjectObservable is not a exported member of angularfire2/database, also it only works for me when adding the AngularFireDatabase into the providers array – Kuhns

Thank you very much, was so annoying because i'm doing a course on Udemy and it isn't explained... – Genista

Answer 2

Inside app.module.ts add below:

import { AngularFireModule } from 'angularfire2';

import { AngularFireDatabaseModule } from 'angularfire2/database';

Then import as below:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],

Inside home.ts use as below:

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

items: FirebaseListObservable<any[]>;

  constructor(public navCtrl: NavController, db: AngularFireDatabase) {
        this.items = db.list('/items');
  }

My Ionic info:

Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.1
OS Platform: macOS Sierra

Pictish

Answer 3

Add it in providers array in app.module.ts -

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [AuthService,**AngularFireAuth, AngularFireDatabase**, AuthGuard, InventoryService]

Diazomethane

This is not best practice. Best practice is importing AngularFireDatabaseModule. – Bullins

Answer 4

Make sure FireBaseDatabaseModule is imported from angularfire2/database-deprecated if youre using FireBaseDatabase from angularfire2/database-deprecated

and vice-versa. The only problem is the mismatch of import statements because they need to belong to the same package either

angularfire2/database or angularfire2/database-deprecated

if you would try to import the database from the first and the module from the second package or vice-versa. It wont recognize it as a DatabaseModule or Database.

------------ ROOT MODULE -------------

    import { AngularFireDatabaseModule } from "angularfire2/database-deprecated"
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes),
        FormsModule,
        AngularFireModule,
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        AngularFireModule.initializeApp(environment.firebase)    
]

------- SERVICE CLASS ------------

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

Hadik

Is there some reason you are giving AngaulrFireModule twice, once without initializeApp and once with? – Bullins

Answer 5

The updated version to use firebase would be in app.module.ts

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';



imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireDatabaseModule,
....
]

Carrnan

Answer 6

I had this error in my Angular application. It turns out my auto-import imported AngularFirebase from 'angularfire2/database-deprecated'. Clearing the -deprecated solved my issue. You might want to check your imports too.

Tripinnate