No provider for AngularFireDatabase, AngularFireAuth
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]
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
]
})
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";
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