FirebaseListObservable Errors (Solved!)

Ionic Framework ionic-v3
1

I am having some errors trying to use CRUD with ionic 3 and angular4. I am using firebase.
my CLI is also throwing errors of “Unused import: 'AngularFireDatabase’” and “*** Property ‘list’ does not exist on type ‘FirebaseListObservable<any[]>’’***”

What did I do wrong?

Errors

Runtime Error
Uncaught (in promise): Error: No provider for FirebaseListObservable! Error: No provider for FirebaseListObservable! at injectionError (http://localhost:8100/build/main.js:1509:86) at noProviderError (http://localhost:8100/build/main.js:1547:12) at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25) at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25) at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44) at resolveDep (http://localhost:8100/build/main.js:11317:45)
Stack
Error: Uncaught (in promise): Error: No provider for FirebaseListObservable!
Error: No provider for FirebaseListObservable!
    at injectionError (http://localhost:8100/build/main.js:1509:86)
    at noProviderError (http://localhost:8100/build/main.js:1547:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3048:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3087:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3019:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2888:21)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:261:149)
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:396:67)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:3855:44)
    at resolveDep (http://localhost:8100/build/main.js:11317:45)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44060:16)
    at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44048:14)
    at http://localhost:8100/build/main.js:44103:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/main.js:4427:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076
Typescript Error
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'.
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts
getDataItems(): FirebaseListObservable<any> {
  return this.pap.list('/dataItems/');
}
Typescript Error
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'.
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts
addItem(name) {
   this.pap.list('/dataItems/').push(name);
}
Typescript Error
Property 'list' does not exist on type 'FirebaseListObservable<any[]>'.
...elopment/ionic/newapp/src/providers/providers-appservice/providers-appservice.ts
remItem(id) {
   this.pap.list('/dataItems/').remove(id);
}
Ionic Framework: 3.4.2
Ionic App Scripts: 1.3.7
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (

Here is My Provider

import { AngularFireDatabase, FirebaseListObservable  } from 'angularfire2/database';
import { Injectable } from '@angular/core';
//import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


/*
  Generated class for the ProvidersAppserviceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class ProvidersAppserviceProvider {



  constructor( public pap: FirebaseListObservable<any[]>) {
    console.log('Hello ProvidersAppserviceProvider Provider');
  }

  

  getDataItems(): FirebaseListObservable<any> {
    return this.pap.list('/dataItems/');
  }

  addItem(name) {
     this.pap.list('/dataItems/').push(name);
  }

  remItem(id) {
     this.pap.list('/dataItems/').remove(id);
  }

}

My Home.ts

import { FirebaseListObservable } from 'angularfire2/database';
import { ProvidersAppserviceProvider } from './../../providers/providers-appservice/providers-appservice';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  dataItems: FirebaseListObservable<any[]>;
  newItem = '';

  constructor(public navCtrl: NavController, public pap: ProvidersAppserviceProvider){
    this.dataItems = this.pap.getDataItems(); 

  }

  addItem() {
    this.pap.addItem(this.newItem);
  }

  remItem(id) {
    this.pap.remItem(id);
  }

}

My app.module

import { ProvidersAppserviceProvider } from './../providers/providers-appservice/providers-appservice';
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AngularFireModule } from "angularfire2";
import { AngularFireDatabaseModule } from "angularfire2/database";



const fbConfig ={
  apiKey: "removed",
  authDomain: "removed",
  databaseURL: "removed",
  projectId: "removed",
  storageBucket: "removed",
  messagingSenderId: "removed"
}

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

I appreciate your help.

2 
export class ProvidersAppserviceProvider {



  constructor( public pap: AngularFireDatabase) { //<=========
    console.log('Hello ProvidersAppserviceProvider Provider');
  }

  

  getDataItems(): FirebaseListObservable<any> {
    return this.pap.list('/dataItems/');
  }

hth
Tim

1 Like
3

This solved it. Thanks a lot