CODEWITHSUNDEEP
dependency-injectionangular
mco67
mco67

Reputation: 51

Inject custom service into custom service

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 ???

Upvotes: 1

Views: 476

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202276

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:

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 ]
});

Upvotes: 0

Related Questions