Strange Issue with FirebaseDatabase Provider

[onewiseburdman]

Login and auth work fine but now, for my simple search component I keep getting. ERROR Error: Uncaught (in promise): Error: No provider for AngularFireDatabase!

I am new to programming with firebase2, so maybe this is not an issue, but no matter where I put the provider which is already in my app-module I still get the error. Been at least 2 hours looking at the problem. Since I just wrote the service based upon this tutorial:

https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/#movies-service-ts

Help please!!!!

The Service called ZipcodeService import { Injectable } from '@angular/core'; import { AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database-deprecated';

@Injectable() export class ZipcodeService {

constructor(private db: AngularFireDatabase) { console.log('Hello ZipcodeService Provider') }

getZipcodes(start, end): FirebaseListObservable { return this.db.list('/zipcodes/', { query: { orderByChild: 'StateName', limitToFirst: 10, startAt: start, endAt: end } }); } }

here is the component:

import { Component, OnInit } from '@angular/core'; import { ZipcodeService } from '../../../pages/shared/zip.service'; import { Subject } from 'rxjs/Subject';

@Component({ selector: 'zipcode-search', templateUrl: './zipcode-search.component.html', styleUrls: ['./zipcode-search.component.css'] }) export class ZipcodeSearchComponent implements OnInit { zipcodes; startAt = new Subject() endAt = new Subject()

constructor(private zipcodesSvc: ZipcodeService) { }

ngOnInit() { this.zipcodesSvc.getZipcodes(this.startAt, this.endAt) .subscribe(zipcodes => this.zipcodes = zipcodes) }

search($event) { let q = $event.target.value this.startAt.next(q) this.endAt.next(q+"\uf8ff") }

}

[Nebula-Spark]

@onewiseburdman Did You imported AngularFireDatabaseModule in the appmodule ? import { AngularFireDatabaseModule } from 'angularfire2/database';

[onewiseburdman]

yes still the same problem

[onewiseburdman]

This is the module I user for the home page component which is where this search form would go: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';

import { NavigationComponent } from '../../pages/shared/navigation/navigation.component'; import { BodyComponent } from '../../pages/shared/body/body.component'; import { FooterComponent } from '../../pages/shared/footer/footer.component'; import { LoginPageComponent } from '../login-page/login-page.component'; import { SignupPageComponent } from '../signup-page/signup-page.component'; import { UserFormComponent } from '../../pages/shared/user-form/user-form.component'; import { ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms'; import { ZipcodeSearchComponent } from '../../pages/shared/zipcode-search/zipcode-search.component'; import { ZipService } from '../../pages/shared/zip.service';

@NgModule({ declarations: [ NavigationComponent, BodyComponent, FooterComponent, LoginPageComponent, SignupPageComponent, UserFormComponent, ZipcodeSearchComponent ], imports: [ CommonModule, ReactiveFormsModule ], exports: [NavigationComponent, BodyComponent, FooterComponent, LoginPageComponent, SignupPageComponent, UserFormComponent, ZipcodeSearchComponent ], providers: [ZipService], }) export class HomePageModule { }

and this is the app-module.

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ModalModule } from 'ngx-bootstrap';

///// Start FireStarter import { environment } from '../environments/environment'; import { AngularFireModule } from 'angularfire2';

import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireDatabase } from 'angularfire2/database'; import { AngularFireAuthModule } from 'angularfire2/auth'; export const firebaseConfig = environment.firebaseConfig;

import { ReactiveFormsModule, FormGroup, FormBuilder, Validators, FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component'; import { SharedComponent } from './pages/shared/shared.component'; import { HomePageComponent } from './pages/home-page/home-page.component'; import { UserDashboardPageComponent } from './pages/user-dashboard-page/user-dashboard-page.component'; import { HomePageModule } from './pages/home-page/home-page.module'; import { AuthService } from './pages/shared/auth.service'; import { ContactPageComponent } from './pages/contact-page/contact-page.component'; import { NotFoundComponent } from './pages/not-found/not-found.component'; import { TitleBarComponent } from './pages/shared/title-bar/title-bar.component';

@NgModule({ declarations: [ AppComponent, SharedComponent, HomePageComponent, UserDashboardPageComponent, ContactPageComponent, NotFoundComponent, TitleBarComponent], imports: [ BrowserModule, AppRoutingModule, HomePageModule, ModalModule.forRoot(), AngularFireAuthModule, AngularFireModule.initializeApp(firebaseConfig), ReactiveFormsModule, AngularFireDatabaseModule, FormsModule ], providers: [AuthService, AngularFireDatabase], bootstrap: [AppComponent], exports: [AngularFireModule] }) export class AppModule { }

[onewiseburdman]

I got it on my own-if anyone else runs into this, and since the documentation doesn't make it real clear: import import {AngularFireDatabase} from 'angularfire2/database-deprecated'; on your module, then add AngularFireDatabase to your provider.

[markgoho]

Hey @onewiseburdman if you use markdown on your code examples it really helps the readability. At the top of the block do three back ticks and then ts (``` ts), then at the bottom, another three backticks (```) and it'll format the whole thing and even use syntax highlighting. Just a tip! 👍

[markgoho]

This may be an issue @codediodeio wants to chime in on, too

[onewiseburdman]

Sorry and thanks. Just learning - it takes a while....

On Tue, Oct 10, 2017 at 11:10 AM, Mark Goho notifications@github.com wrote:

Hey @onewiseburdman https://github.com/onewiseburdman if you use markdown on your code examples it really helps the readability. At the top of the block do three back ticks and then ts (ts), then at the bottom, another three backticks () and it'll format the whole thing and even use syntax highlighting. Just a tip! 👍

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angularfire2/issues/1233#issuecomment-335504911, or mute the thread https://github.com/notifications/unsubscribe-auth/ASsLVwOeRpcogZ3gZ1cqY38qhwO5_p5pks5sq4iVgaJpZM4Pys8k .