Angular 2 - Singleton Services?

Question

In Angular 1, I often used service factories to store the general state that is available for many components. It seems that in Angular 2, all services that are introduced as @Injectable () are created every time, thereby losing their general state.

I 'register' the service in the root module of the meta key providers , but still I get a temporary instance.

What I have:

 Injectable() export class ArtistService { constructor(private http:Http) { // firing on each injection console.log("ArtistService ctor"); } } 

to call it in the component, then:

 @Component({ selector: 'artist-display', templateUrl: './artistDisplay.html', }) export class ArtistDisplay { constructor(private artistService: ArtistService) { // instance is fine but transient } } 

And the definition of the module:

 @NgModule({ declarations: [...], imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)], providers : [ ArtistService, // make sure you use this for Hash Urls rather than HTML 5 routing { provide: LocationStrategy, useClass: HashLocationStrategy }, ], bootstrap: [AppComponent] }) 

I suspect there might be some other way to “register" the ArtistService so that it ArtistService loaded as a static instance? Is this possible using DI or is it necessary to create a static instance method manually?

Update:
It turns out that the code above works . I was looking for the wrong place and a logical error that led to incorrect data caching.

The code above works and assigns the service in the top-level providers section of the top-level AppModule - this is the key to keep the parent link loaded for the duration of the AppComponent. which actually stays loaded for the lifetime of the application, providing an instance of Singleton .

To get a transient instance, you can declare the meta tag providers and the service name on the actual component , which will then create the service when the component is loaded / reloaded.

Answer 1

What you showed is the right way. It creates a single instance that will be shared between the components.

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=preview for reference purpose.

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {service} from './service'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], providers:[service], bootstrap: [ AppComponent ] }) export class AppModule { } 

Answer 2

I also want to create an object for use as a provider in angular2, so I created @injector. but if we install a provider in each @ component and import it, then each component uses a different injector object. To create a singleton provider, I declared this provider in the parent component and imported it into each, now its working mode. https://angular.io/guide/dependency-injection

Answer 3

Ok, let me try to explain how the services work according to me, and basically the documentation.

There are 3 main scenarios:

• The service is included in the array of suppliers at the component level - the service can be entered by the parent and all child elements.

• The service is included in the array of providers at the module level - everything that is in this module knows about the service.

• The service is included in the array of providers at the module level - everything that is in this module knows about the service, but if you use a component from this module inside another component from another module that imports the first module, the service instance for this component will be different.

Answer 4

Singleton service should be stored only in app.module.ts "providers" (array)

and it should not be located in any other component or service provider (array).

if done correctly then angular 2 - 2.4.0 - Singleton works fine