My application has a 'store' service that depends on a 'repo' service. The issue I'm facing is that the 'store' service is being injected correctly, but the 'repo' service it receives appears to be a function instead of an object. I suspect that this might be related to the order in which the JavaScript code is executed, but I have not been able to pinpoint the exact cause.
For search engines: The error message I encounter states "'XXX' is not a function" when attempting to access a function on the injected repo.
Below is some sample code for reference:
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');