Angular 2 – multiple instance of service created

by

update Angular >= 2.0.0-RC.6

Don’t add the service to the providers of the component.
Instead add it to 

@NgModule({ providers: [...], ...

(of a module that is not lazy loaded because lazy loaded modules introduce their own scope)

@Component ({
    selector : 'Sub-Component',
    template : `<hr>
            This is the Sub-Component !
            <BR>
            StateService Log : 
            <pre>{{ _stateService.log }}</pre>
            <button (click)="WriteToLog ()">Write to log</button>
            `,
    // providers : [StateService] <== remove
})

Angular <=2.0.0-RC.5

If you add it on a component you get a new service instance for each component instance. Instead add it to

bootstrap(AppComponent, [StateService]);

You can have more fine-grained control by adding it to a single component, then this component and all children get the same instance injected but otherwise the application works with the instance created by bootstrap(). This is the “hierarchical” in Angulars DI.

See also
– http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
– http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

More Related Contents:

  1. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  2. What is the proper use of an EventEmitter?
  3. How do I create a singleton service in Angular 2?
  4. How can I watch for changes to localStorage in Angular2?
  5. Using multiple instances of the same service
  6. Angular 2 cache observable http result data [duplicate]
  7. Can lazy-loaded modules share the same instance of a service provided by their parent?
  8. Angular2 – Interaction between components using a service
  9. How to share service between two modules – @NgModule in angular not between to components?
  10. How to call component method from service? (angular2)
  11. Testing – Can’t resolve all parameters for (ClassName)
  12. Pass config data using forRoot
  13. How to use Dependency Injection (DI) correctly in Angular2?
  14. Getting Image from API in Angular 4/5+?
  15. Angular 2 – Using Shared Service
  16. angular 2 http withCredentials
  17. Angular 2 – Services consuming others services before call a method
  18. How to check the length of an Observable array
  19. Property ‘toPromise’ does not exist on type ‘Observable’
  20. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  21. Angular 4 Material table highlight a row
  22. Angular Mat Select Multiple selectionchange finding which option was changed
  23. Angular 4: “Cannot find name ‘require’
  24. why lazy loaded module has to import commonModule? Angular 2
  25. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  26. How is Angular’s *ngFor loop implemented?
  27. Angular FIrebase 5 objects keys not being displayed. So can’t delete
  28. How to implement behavior subject using service in Angular 8
  29. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
  30. Get reference to a directive used in a component

Leave a Comment