1

I'm using http service imported from @angular/http inside a shared module , I extend the http service using class inheritance. So my shared module has a service called "AuthHttp" which extends http service. Inside my main app module I define people providers , provide : http useClass : AuthHttp. And inside my app at different components I inject the http service , is it possible or by design that the service is not singleton ?

Haddar Macdasi
  • 3,477
  • 8
  • 37
  • 59
  • 1
    That just depends on your code, but that is missing in your question ,-) – Günter Zöchbauer Nov 25 '16 at 19:42
  • An instance of the service is created at every 'level' of your app that you provide it. Further information here: http://stackoverflow.com/questions/34929665/angularjs-2-multiple-instance-of-service-created and http://stackoverflow.com/questions/34804298/whats-the-best-way-to-inject-one-service-into-another-in-angular-2-beta/34807397#34807397 – Thibs Nov 25 '16 at 20:00

1 Answers1

7

If you provide the service in @NgModule({providers: [...]}) of the AppModule or a module directly or indirectly imported by AppModule, then you get a singleton.

If you provide the service in a @Component(...), then you get a service instance per component instance.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • That's what I though. However, I just had a strange situation: I import my `AuthenticationModule` in my `AppModule`. And in this `AuthenticationModule` I provide my `AuthenticationService` (I need that as a singleton since I'm working with member variables there). However, I got a `maximum call stack exceeded`, which is a sign for a service not being a singleton. But: When I provide the service in my `AppModule` instead of the `AuthenticationModule`, everything works as expected. Can you please clear things up here? – dave0688 Mar 07 '18 at 10:14
  • Hard to tell from this information. If the providers are only provided in `@NgModule()` of **non-lazy-loaded** modules there will never be more than a single instance created by DI. – Günter Zöchbauer Mar 07 '18 at 10:16
  • Hm, seems that's the case. Is there anything else which comes into your mind causing a `maximum callstack exceeded` in this situation? – dave0688 Mar 07 '18 at 10:22
  • Hard to tell without more information. Can you create a minimal reproduction in http://stackblitz.com? – Günter Zöchbauer Mar 07 '18 at 10:23
  • Sure, please see my example here: https://stackblitz.com/edit/angular-iaaywr?file=app%2Fapp.module.ts – dave0688 Mar 07 '18 at 10:33
  • 2
    You have found the most effective way to create an endless loop ;-) `public set bypassConfirmations(val: boolean) { this.bypassConfirmations = val; }` You need a backing field like `this._bypassConfirmations = val;` (added underline or similar) instead. https://stackblitz.com/edit/angular-gozwcd – Günter Zöchbauer Mar 07 '18 at 10:36
  • 1
    Maaaaan thanks a lot, you're so right :D Thanks very much for your help! :) – dave0688 Mar 07 '18 at 10:37