Inject custom service into custom service

Question

Using Angular2 RC1

Suppose I have two custom services: for example a ConfigService and an AuthService.

And also assume that AuthService needs data from the ConfigService.

ConfigService is like that

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

@Injectable()
export class ConfigService {

   public baseURL: string; 

   constructor() {
      this.baseURL = 'http://localhost:8080';
   }
}

My ConfigService has to be a singleton, so I've declare it in my bootstrap provider array:

bootstrap(MyWayAppComponent, [
  HTTP_PROVIDERS,
  ...
  ConfigService
]);

No problem when I try to inject my ConfigService in any Component, I always fetch the same instance.

But now I want to inject this ConfigService in my AuthService (AuthService is not a singleton and is provided in my auth component)

I inject the ConfigService in my AuthService as followed :

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { ConfigService } from '../services/ConfigService';

@Injectable()
export class AuthService {

    constructor(private http: Http, private configService: ConfigService) {
    }
}

And response is :

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for ConfigService!
ORIGINAL STACKTRACE:
Error: DI Exception
at NoProviderError.BaseException [as constructor] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:17:23)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:39:16)
at new NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:75:16)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:776:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:804:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:767:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:576:21)
at ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:23:48)
at ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:23:48)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:801:24)
ERROR CONTEXT:
[object Object]

I've carefully read the excellent Pascal Precht article but I don' see where I'm wrong... http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

Note : If I my AuthService I try to inject a "regular" service (like http) I have no pb... So I should forget something in my service declaration but what ???

Your code looks fine, do you may be have multiple `ConfigService` classes? is `../services/ConfigService` the same one as the one in bootstrap ? — Abdulrahman Alsoghayer, May 08 '16 at 03:59
Arggghh, you're right !!!! Trouble with uppercase/minorcase !!! Thx a lot !!! — mco67, May 08 '16 at 06:26

score 0 · Answer 1 · edited May 23 '17 at 11:46

Providers can only be defined when bootstrapping your application or at the level of components.

So you can define the ConfigService at this level.

See this question for more details:

What's the best way to inject one service into another in angular 2 (Beta)?

Regarding the AuthService, I don't know how you defined its providers but if you leverage useFactory for this, you need to explicitly define its dependencies (included the ConfigService). Here is à sample:

provide(AuthService, {
  useFactory: (config) => {
    return new... 
  },
  depend: [ ConfigService ]
});

Inject custom service into custom service

1 Answers1