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

Solution 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
  ]
})

Solution 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

Solution 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]

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

Solution 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,
....
]

View more solutions