Angular 2 injected service into another service is undefined

Question

I'm trying to create a small framework to make it easier for me to implement CRUD functionality.

Therefore I've created a BaseHttpService like this:

... <imports> ...
@Injectable()
export class BaseHttpService {
  constructor(
    private http: Http
  ) {
    console.log('ctor');
    this.apiUrl$.subscribe(apiUrl => this.rootApiUrl = apiUrl.removeTrailingSlash());
  }
  public getPagedResultOfType<T extends IBaseEntity>(url: string, vm: ISearchVm<T>, options?: RequestOptions): Observable<PagedResult<T>>{ ... <implementation> ... }
  ... <other methods> ...
}

Then I have my BaseEntityReadOnlyService that uses this BaseHttpService to create the Read fucntionality of the CRUD:

@Injectable()
export class BaseAppSumEntityReadOnlyService<T extends IBaseEntity>{
  constructor(
    @Inject(forwardRef(() => BaseHttpService)) public baseHttpService: BaseHttpService
    // public baseHttpService: BaseHttpService
  ) { 
    console.log('ro ctor');
    console.log(this.baseHttpService); // <-- this is always undefined
  }

  getAll(vm: ISearchVm<T>): Observable<PagedResult<T>>{
    const url = `${this.baseUrl}`;
    console.log(this.baseHttpService);
    return this.baseHttpService.getPagedResultOfType<T>(url, vm); // <-- this fails because baseHttpService is undefined: Cannot read property 'getPagedResultOfType' of undefined
  }
  ... <more methods>
}

In my FrameworkModule, I've tried alot:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    HttpModule
  ],
  providers: [
    BaseHttpService,
    // BaseAppSumEntityReadOnlyService
    { provide: BaseAppSumEntityReadOnlyService, useClass: BaseAppSumEntityReadOnlyService, deps: [ BaseHttpService ] },
  ]
})
export class AppSumFrameworkModule { }

This is what I currently have, but this does not work. The error I get is:

Cannot read property 'getPagedResultOfType' of undefined

How can I get the BaseHttpService to be injected in my BaseAppSumEntityReadOnlyService?

Answer 1

Import your service like this:

import { BaseHttpService} from '../servicePath';

Then declare it like this in your constructor:

constructor(
    private baseHttpService: BaseHttpService
  ) { 
    console.log(this.baseHttpService); 
  }

Let me know if it works like this, and if not, copy/paste the console error please. :D

Edit 1:

Service: BaseHttpService

... <imports> ...
@Injectable()
export class BaseHttpService {
  constructor(
    private http: Http
  ) {
    console.log('ctor');
    this.apiUrl$.subscribe(apiUrl => this.rootApiUrl = apiUrl.removeTrailingSlash());
  }
  public getPagedResultOfType<T extends IBaseEntity>(url: string, vm: ISearchVm<T>, options?: RequestOptions): Observable<PagedResult<T>>{ ... <implementation> ... }
  ... <other methods> ...
}

Service: BaseAppSumEntityReadOnlyService

@Injectable()
export class BaseAppSumEntityReadOnlyService<T extends IBaseEntity>{
  constructor(
    private baseHttpService: BaseHttpService
  ) { 
    console.log('ro ctor');
    console.log(this.baseHttpService); // <-- this is always undefined
  }

  getAll(vm: ISearchVm<T>): Observable<PagedResult<T>>{
    const url = `${this.baseUrl}`;
    console.log(this.baseHttpService);
    return this.baseHttpService.getPagedResultOfType<T>(url, vm); // <-- this fails because baseHttpService is undefined: Cannot read property 'getPagedResultOfType' of undefined
  }
  ... <more methods>
}

Module:

@NgModule({
  declarations: [
    myComponent
  ],
  imports: [
    CommonModule,
    HttpModule
  ],
  providers: [
    BaseHttpService,
    BaseAppSumEntityReadOnlyService,
  ]
})
export class AppSumFrameworkModule { }

Component: myComponent

... <imports> ...
@Component()
export class myComponent {
 constructor(
    private baseAppService: BaseAppSumEntityReadOnlyService
  ) { 
    console.log(this.baseAppService); 
  }
}