2

I have been trying to abstract and hide the implementation of my DataService via the following setup:

DataService:

import { Observable } from 'rxjs/Observable';

export abstract class DataService {
    abstract getMyData(): Observable<any>;
}

FirebaseDataService:

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

import { DataService } from './data.service';
import { MyData } from '../mydata/mydata.model';

export class FirebaseDataService extends DataService {
  constructor(private db: AngularFireDatabase) {
    super();
  }

  getMyData(): Observable<any> {
    return this.db.list(MyData.name).valueChanges();
  }
}

DataModule:

import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { DataService } from './data.service';
import { FirebaseDataService } from './firebase-data.service';
import { environment } from '../../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [
    { provide: DataService, useClass: FirebaseDataService }
  ]
})
export class DataModule { }

In another module, I import the DataModule and invoke the DataService methods as follows:

@Injectable()
export class MyDataEffects {
  @Effect()
  getMyData = this.actions$
    .ofType(MyDataActions.GET_MYDATA)
    .switchMap((action: MyDataActions.GetMyData) => this.db.getMyData())
    .map( mydata => ({ type: MyDataActions.SET_MYDATA, payload: mydata }));

  constructor(
    private actions$: Actions,
    private db: DataService,
    private store: Store<fromMyData.FeatureState>) { }
}

When this code is run, the browser logs a "Can't resolve all parameters for FirebaseDataService" error message. It sounds like a dependency injection problem, but I haven't been able to figure out what the exact problem is.

Is this an Angular bug or am I missing something? Any help is appreciated.

Peter
  • 1,720
  • 3
  • 18
  • 30
  • 2
    Have you tried adding `@Injectable()` to your `FirebaseDataService`? as per [this](https://stackoverflow.com/a/40198530/3055401) answer. – Michael Doye Nov 29 '17 at 07:29

1 Answers1

0

Change this from -

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

import { DataService } from './data.service';
import { MyData } from '../mydata/mydata.model';

export class FirebaseDataService extends DataService

To

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import { DataService } from './data.service';
import { MyData } from '../mydata/mydata.model';

@Injectable()
export class FirebaseDataService extends DataService
Abhishek Chokra
  • 1,381
  • 2
  • 9
  • 17