Angular 2 DI Injects function rather than object

Question

I have a 'store' service that relies on a 'repo' service. My component uses the service. The 'store' service seems to be injected just fine, but the repo service it gets injected seems to be a function rather than an object. I suspect it has something to do with the order the JS is executed but I haven't been able to figure it out.

For the benefit of search engines: The error message I get is "'XXX' is not a function". I get it when trying to access a function on injected repo.

Here is some code:

app.module:

import { ServiceCallListComponent } from './service-call-list/service-call-list.component';
import { AppComponent } from './app.component';
import { ServiceCallsDataRepository } from './data/service-call.repo'
import { SERVICE_CALLS_DATA_REPO } from './data/service-call.repo.token'
import { LocalServiceCallsDataRepository } from './data/service-call.repo.local';
import { ServiceCallsStore } from './data/serivce-call.store';

@NgModule({
  declarations: [
    AppComponent,
    ServiceCallListComponent,
  ],
  imports: [... ],
  bootstrap: [AppComponent],
  providers: [{ provide: SERVICE_CALLS_DATA_REPO, useValue: LocalServiceCallsDataRepository },
    ServiceCallsStore, LocalServiceCallsDataRepository,

  ],
})
export class AppModule { }

service-call.store

import { Injectable, Inject } from '@angular/core';
import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
import { ServiceCall } from './service-call.model'
import { ServiceCallsDataRepository, StoreResultsRange } from './service-call.repo'
import { SERVICE_CALLS_DATA_REPO } from './service-call.repo.token'
import { LocalServiceCallsDataRepository } from './service-call.repo.local'

@Injectable()
export class ServiceCallsStore {
   // repo: LocalServiceCallsDataRepository;
    constructor( @Inject(SERVICE_CALLS_DATA_REPO) private repo: ServiceCallsDataRepository) {
    //     constructor(  private repo: LocalServiceCallsDataRepository) {
        //constructor() {
         //this.repo=new LocalServiceCallsDataRepository();
    }

    public getSerivesCallsObservable(filter: BehaviorSubject<string>, range: Observable<StoreResultsRange>): Observable<Array<ServiceCall>> {
        let b = this.repo.getServiceCalls2();
        let observable = filter.map(fltr => this.repo.getServiceCalls2().filter(sc => sc.name.indexOf(fltr) > -1));
        // range.subscribe(rng => this.repo.load(filter.getValue(), rng))
        return observable;
    }

    public add(serviceCall: ServiceCall): void {
        this.repo.add(serviceCall);
    }
}

service-call.repo

   import { Injectable, Inject } from '@angular/core';
    import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
    import { ServiceCall } from './service-call.model'
    import { ServiceCallsDataRepository, StoreResultsRange } from './service-call.repo'
    import { SERVICE_CALLS_DATA_REPO } from './service-call.repo.token'
    import { LocalServiceCallsDataRepository } from './service-call.repo.local'

    @Injectable()
    export class ServiceCallsStore {
                constructor( @Inject(SERVICE_CALLS_DATA_REPO) private repo: ServiceCallsDataRepository) {
        //     constructor(  private repo: LocalServiceCallsDataRepository) {
        }

        public getSerivesCallsObservable(filter: BehaviorSubject<string>, range: Observable<StoreResultsRange>): Observable<Array<ServiceCall>> {
            let b = this.repo.getServiceCalls2();
            let observable = filter.map(fltr => this.repo.getServiceCalls2().filter(sc => sc.name.indexOf(fltr) > -1));
            // range.subscribe(rng => this.repo.load(filter.getValue(), rng))
            return observable;
        }

        public add(serviceCall: ServiceCall): void {
            this.repo.add(serviceCall);
        }
    }

service-call.repo.local

import { Injectable, Inject } from '@angular/core';
import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs/rx';
import { ServiceCall } from './service-call.model'
import { ServiceCallsDataRepository,StoreResultsRange } from './service-call.repo'

@Injectable()
export class LocalServiceCallsDataRepository implements ServiceCallsDataRepository {
    private data: Array<ServiceCall> = new Array<ServiceCall>();
    private serviceCalls = new BehaviorSubject<Array<ServiceCall>>(new Array<ServiceCall>());
    constructor() {
    }

    public getServiceCalls2(): Array<ServiceCall> {
        return this.data;//this.serviceCalls.getValue();
    }

    public add(serviceCall: ServiceCall): void {
        throw "not implemented";
    }

    public load(filter: string, range: StoreResultsRange): void {
        throw "not implemented";

        //this.serviceCalls.next(this.data);
    }
}

service-call.repo.token

import { OpaqueToken } from '@angular/core';

export let SERVICE_CALLS_DATA_REPO = new OpaqueToken('SERVICE_CALLS_DATA_REPO');

Answer 1

Try to use useClass instead of useValue . Like this:

{ provide: SERVICE_CALLS_DATA_REPO, useValue: LocalServiceCallsDataRepository }