34

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!

Error

Package.json Package

App.module.ts App.Module

Home.html Home HTML

Home.ts Home TS

Pengyy
  • 37,383
  • 15
  • 83
  • 73
Slabach
  • 391
  • 1
  • 4
  • 9
  • 15
    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). – Frank van Puffelen May 04 '17 at 03:29

6 Answers6

75

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
  ]
})
Pengyy
  • 37,383
  • 15
  • 83
  • 73
  • Okay, I did this, got rid of all errors (great!) However, it is still not reading the information fro Firebase? – Slabach May 04 '17 at 02:52
  • @Slabach maybe there is something wrong with your firebase's config. I just updated one of my example project from angularfire2@2.0.0+ to angularfire2@4.0.0+, and see it works well. – Pengyy May 04 '17 at 02:55
  • 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 :) – djnose Oct 09 '17 at 04:33
  • 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 – yoav barnea Jul 29 '18 at 09:27
  • Thank you very much, was so annoying because i'm doing a course on Udemy and it isn't explained... – M. Mariscal Nov 29 '18 at 16:35
16

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
Sunil Kumar
  • 1,718
  • 16
  • 33
8

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]
Pari
  • 1,443
  • 3
  • 19
  • 34
  • This is not best practice. Best practice is importing `AngularFireDatabaseModule`. –  Jun 05 '18 at 08:50
7

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";
Mike Ramsey
  • 843
  • 8
  • 23
Amrit Pal Singh
  • 71
  • 1
  • 2
  • Is there some reason you are giving `AngaulrFireModule` twice, once without `initializeApp` and once with? –  Jun 05 '18 at 08:50
2

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,
....
]
Ipsita
  • 111
  • 2
  • 5
1

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.

Alf Moh
  • 7,159
  • 5
  • 41
  • 50