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

Answer 1

AngularDatabase(same for AngularAuth) is separated to its own module AngularFireDatabaseModule(AngularFireAuthModule for AngularAuth) from version angularFire2@4.0.0, 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   ] }) 

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 

Answer 3

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"; 

Answer 4

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] 

Answer 5

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.