Runtime error uncaught (in promise): error: no provider for angularfiredatabase! injectionerror

Ionic Framework ionic-v3
1

Hi Guys, I am creating an firebase and ionic chat application. I am getting an error “runtime error uncaught (in promise): error: no provider for angularfiredatabase! injectionerror”. The error started coming when I started coding Home.ts file. Kindly refer the below code. Attached is the screenshot of the error message

Appmodule.ts code:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { HttpModule } from '@angular/http';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';

import { FirebaseServiceProvider } from '../providers/firebase-service/firebase-service';


const firebaseConfig = {
   apiKey: "#########_NO9dizx-G--##",
    authDomain: "######-47fe9.firebaseapp.com",
    databaseURL: "https://####-47fe9.firebaseio.com",
    projectId: "chatbuddy-##",
    storageBucket: "####-47fe9.appspot.com",
    messagingSenderId: "#######"
  };


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    FirebaseServiceProvider,
    FirebaseServiceProvider
  ]
})
export class AppModule {}

Home.ts code:

import { FirebaseServiceProvider } from './../../providers/firebase-service/firebase-service';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseListObservable } from 'angularfire2/database';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
shoppingItems: FirebaseListObservable<any[]>;
newItem = '';


  constructor(public navCtrl: NavController, public FirebaseServiceProvider: FirebaseServiceProvider) {
  this.shoppingItems = this.FirebaseServiceProvider.getShoppingItems();

  }
  addItems() {
this.FirebaseServiceProvider.addItem(this.newItem);
  }

  removeItem(id) {
  this.FirebaseServiceProvider.removeItem(id);
  }

}

Home.html code:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Shopping Cart
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
 <ion-row>
 <ion-col col-9>
 <ion-item>
 <ion-input type="text [(ngModel="newItem placeholder="New shopping item"></ion-input>
 </ion-item>
 </ion-col>
 <ion-col>
 <button ion-button (click)="addItem()">Add!</button>
 </ion-col>
 </ion-row>

 <ion-list>
 <ion-item-sliding *ngFor="let item of shoppingItems | async">
 <ion-item>
 {{ item.$value }}
 </ion-item>
 <ion-item-options side="right">
 <button io-button color="danger" icon-only (click>="removeItem(item.$key)">
 	<ion-icon name="trash"></ion-icon>
 </button>
 </ion-item-options>
 </ion-item-sliding>
 </ion-list> 
</ion-content>

image
Ionic Error.PNG1364×696 99 KB

2

I think you would benefit from reading the AngularFire documentation. Your code seems to invoke things that are not meaningful, for example your import of AngularFireDatabaseModule that you don’t use. Maybe you saw that in some blog somewhere? There’s a lot of outdated, incorrect information about AF2 online. Other things confuse me too, for example I don’t understand why you declare FirebaseServiceProvider twice. So I think you need to get familiar with the original source (not blog posts) and clean up your code.

3

Hi, do you have any reference document ?

4

The ReadMe files, the Changelogs and the Issues threads of the AngularFire 4 project.

5

Guys, please review my above code and let me know what mistake I have made.

6

Did you read the docs now and change your code accordingly?

7

Do you have docs? As I am unable to find

8

https://github.com/angular/angularfire2/tree/master/docs for example

9

Hi Guys, I have managed to resolve this error. I had forgot to import AngularFireDatabaseModule,in app.module .ts

Correct code:


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { HttpModule } from '@angular/http';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { FirebaseService } from '../providers/firebase-service/firebase-service';


const firebaseConfig = {
    apiKey: "#########_NO9dizx-G--##",
    authDomain: "######-47fe9.firebaseapp.com",
    databaseURL: "https://####-47fe9.firebaseio.com",
    projectId: "chatbuddy-##",
    storageBucket: "####-47fe9.appspot.com",
    messagingSenderId: "#######"
  };


@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    FirebaseService,
    
  ]
})
export class AppModule {}
1 Like
10

@mahaveer08 am following same code as you wrote here …but am getting same error
please see below my code …and help me

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { Injectable } from ‘@angular/core’;
import { AngularFireModule } from ‘angularfire2’;
import { AngularFireDatabaseModule,AngularFireDatabase } from ‘angularfire2/database’;

import { FIREBASE_CREDENTIALS} from ‘./firebase.credentials’;

import { MyApp } from ‘./app.component’;
import { ShoppingListPage } from ‘…/pages/shopping-list/shopping-list’;
import { AddShoppingPage } from ‘…/pages/add-shopping/add-shopping’;
import { EditShoppingItemPage } from ‘…/pages/edit-shopping-item/edit-shopping-item’;

};

@NgModule({
declarations: [
MyApp,
ShoppingListPage,
AddShoppingPage,
EditShoppingItemPage
],
imports: [
BrowserModule,
AngularFireDatabaseModule,

//Initialize AngularFire with credentials
AngularFireModule.initializeApp(config),
IonicModule.forRoot(MyApp),

//Import AngularFireDatabaseModule to use database

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ShoppingListPage,
AddShoppingPage,
EditShoppingItemPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}