Issue with getting a constructor to work when passing a value into it

Question

I have this code:

import {Component, OnInit} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from '../shared/item';
import {ItemService} from '../shared/item.service';

@Component({
  selector: 'app-items-list',
  templateUrl: './items-list.component.html',
  styleUrls: ['./items-list.component.scss']
})
export class ItemsListComponent implements OnInit {

  public items: FirebaseListObservable<any[]>;

  constructor(private itemSvc: ItemService) {
  }

  ngOnInit() {
    this.items = this.itemSvc.getItemsList({limitToLast: 10});
  }

  deleteItems() {
    this.itemSvc.deleteAll();
  }
}

When I try to run it, I get the great and useful ERROR Error: "[object Object]". I was commenting out, until the error went away. It looks like there is something wrong with my constructor, but I have no idea what. Any ideas?

Here's my ItemService:

import {Injectable} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from './item';

@Injectable()
export class ItemService {

  private basePath: string = '/items';

  items: FirebaseListObservable<Item[]> = null; //  list of objects
  item: FirebaseObjectObservable<Item> = null; //   single object

  constructor(private db: AngularFireDatabase) {
  }

  getItemsList(query = {}): FirebaseListObservable<any[]> {
    this.items = this.db.list(this.basePath, {
      query: query
    });
    return this.items;
  }

  // Return a single observable item
  getItem(key: string): FirebaseObjectObservable<Item> {
    const itemPath = `${this.basePath}/${key}`;
    this.item = this.db.object(itemPath);
    return this.item;
  }

  createItem(item: Item): void {
    this.items.push(item)
      // .catch(error => this.handleError(error));
  }


  // Update an existing item
  updateItem(key: string, value: any): void {
    this.items.update(key, value)
      .catch(error => this.handleError(error));
  }

  // Deletes a single item
  deleteItem(key: string): void {
    this.items.remove(key)
      .catch(error => this.handleError(error));
  }

  // Deletes the entire list of items
  deleteAll(): void {
    this.items.remove()
      .catch(error => this.handleError(error));
  }

  // Default error handling for all actions
  private handleError(error) {
    console.log(error);
  }
}

HTML template:

<div *ngFor="let item of items | async" >
  <app-item-detail [item]='item'></app-item-detail>
</div>
<!--<button (click)='deleteItems()'>Delete Entire List</button>-->

app.module.ts file:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {rootRouterConfig} from './app.routes';
import {AngularFireModule} from 'angularfire2';
import {AngularFirestoreModule} from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {environment} from '../environments/environment';
import {LoginComponent} from './login/login.component';
import {UserComponent} from './user/user.component';
import {RegisterComponent} from './register/register.component';
import {UserResolver} from './user/user.resolver';
import {AuthGuard} from './core/auth.guard';
import {AuthService} from './core/auth.service';
import {UserService} from './core/user.service';
import {ReactiveFormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
import {ItemsListComponent} from './items/items-list/items-list.component';
import {ItemDetailComponent} from './items/item-detail/item-detail.component';
import {ItemFormexportComponent} from './items/item-formexport/item-formexport.component';
import {ItemFormComponent} from './items/item-form/item-form.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    UserComponent,
    RegisterComponent,
    HomeComponent,
    AboutComponent,
    ItemsListComponent,
    ItemDetailComponent,
    ItemFormexportComponent,
    ItemFormComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot(rootRouterConfig, {useHash: false}),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
  ],
  providers: [AuthService, UserService, UserResolver, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule {
}

I'm new to Angular so if I missed anything please let me know, and I'll add it.

If I do this it won't be found in `ngOnInit` and `deleteItems`, right? — Alex Ironside, May 22 '18 at 07:39
Your constructor is completely fine. @NikolaLukic - injected parameters can be private and they should be - to be used only in the scope of component. — Macryo, May 22 '18 at 07:42
did you register your injected services within module `providers` section? — dee zg, May 22 '18 at 07:45
The code works with an empty constructor. If I comment out the OnInit and deleteItems functions, but leave the constructor it breaks. Any idea what else it can be? — Alex Ironside, May 22 '18 at 07:45
@deezg if you're taking about `app.module.ts` then yes. They're in both imports and in declarations — Alex Ironside, May 22 '18 at 07:46
Have you imported the AngularFireDatabase module in app.module.ts file? — Sudhakar, May 22 '18 at 07:49
@Sudhakar, no I have not. I just added my `app.module.ts` file to the question. Why do I need to import it? — Alex Ironside, May 22 '18 at 07:52
@alex3wielki, AngularDatabase(same for AngularAuth) is separated to its own module AngularFireDatabaseModule(AngularFireAuthModule for AngularAuth) from version angularFire2@4.0.0, see documentation here. See the https://stackoverflow.com/questions/43772474/no-provider-for-angularfiredatabase-angularfireauth — Sudhakar, May 22 '18 at 08:00
That's why I used the `database-deprecated` path. Won't this work? — Alex Ironside, May 22 '18 at 08:03

score 1 · Accepted Answer · answered May 22 '18 at 08:03

You make sure that you import the AngularFireDatabaseModule in your app.module.ts file. Since your service is using the AngularFireDatabase.

Please see the below link for more info. https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

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
  ]
})

In here: `import {AngularFireDatabase, FirebaseObjectObservable} from 'angularfire2/database';` I'm getting this error: `Module "..." has no exported member "FirebaseObjectObservable"`. Would they move it again? — Alex Ironside, May 22 '18 at 08:13
@alex3wielki, not sure Alex. See this link. it may help you. https://github.com/angular/angularfire2/issues/1382 — Sudhakar, May 22 '18 at 08:28
Ok I fixed the reference errors, but can you explain how this is supposed to help? I'm just importing the new modules. — Alex Ironside, May 22 '18 at 08:34

Issue with getting a constructor to work when passing a value into it

1 Answers1