Angular 5 Service As singleton

Question

I'm working on Angular 5 singleton service. In my opinion I did everything according to guideline, unfortunately my service is NOT singleton. Each component seems to have it's on service instance. My Code looks like this:

App Module:

import { StarService } from './star-service/star-service'
import { StarSearchComponent } from './star-search/star-search.component'
import { StarReportComponent } from './star-report/star-report.component';
@NgModule({
imports: [
BrowserModule,
   FormsModule,
   AppRoutingModule
],
declarations: [
 AppComponent,
 StarSearchComponent, 
 StarReportComponent
],
providers: [StarService
],
bootstrap: [AppComponent]
})
export class AppModule {
}

Service:

import { Injectable } from '@angular/core';
import { log } from 'util';
@Injectable()
export class StarService {
public Param: string;

constructor() { 
this.Param = "Not Set";
console.log("Service Instance created");
}
}

Star Report Component

import { Component, OnInit } from '@angular/core';
import { StarService } from '../star-service/star-service'
@Component({
  selector: 'app-star-report',
  templateUrl: '<p>{{getReport}}</p>',
  styleUrls: ['./star-report.component.css']
})
export class StarReportComponent implements OnInit {

  constructor(private starService: StarService) { }
  ngOnInit() {
  this.starService.Param = "Report";
}

 get getReport(): string
  {
   return this.starService.Param;
  }
 }

Star Search Component

 import { Component, OnInit } from '@angular/core';
 import { StarService } from '../star-service/star-service'

 @Component({
 selector: 'app-star-search',
 templateUrl: './star-search.component.html',
 styleUrls: ['./star-search.component.css']
 })
 export class StarSearchComponent implements OnInit {
   constructor(private starService: StarService) { }
 ngOnInit() {
  }
 get getSearch(): string
 {
   return this.starService.Param;
 }
 }

And now, my console displays "Service Instance created" each time I'm switching component. Also, each component display wrong text. I belive, when StarReportComponent is create, it switches starService.Param = "Report" and it shall stay there. Unfortunatelly, when StarSearchComponent is called, it displays default "Not Set". Why? Why singleton is not working here? Thanks

Answer 1

I was struggling with this problem for quite some time. I wanted to have a singleton and whenever I routed from one link to the other the service, that I expected to be singleton, was recreated. Finally the solution was to change the navigation link:

From :

<a href="/customers">Customers</a>

To:

<a routerLink="/customers">Customers</a>

I have forked the link from angular documentation on singleton to remove the usage of commonmodule and sharedmodule to prove that this isn't causing the problem. Although I do agree that using commonmodule and sharedmodule makes the modules more modular.

https://stackblitz.com/edit/angular-uxbbdx

I have lazy loading modules similar to the example. Let me know if this does not solve the issue for you. I have played around with this problem for quite some time and probably will be able to help by recreating the issue again.

Answer 2

What you are asking for is a static property in your Service. Otherwise, it is working as expected. If you want to make a property of your service singleton throughout, declare it like this in your service,

export class StarService {

static _param: string;

// use getters and setters to access them from your instantiated service objects from within various components
get Param() { return StarService._param; }

set Param(param: string) { StarService._param = param; }

}

EDIT

Oh I am sorry, just re-read your question, it is behaving as expected. Since you have this.Param = "Not Set"; in the constructor of your service, everytime you switch between your components, it forces the instantiation of this singleton service again in your component (through the constructor's argument in your component) which in turn makes the constructor of service called again and thus reverts back the Param 's value to "Not Set" . Makes sense?

EDIT-2

Answering to your comment, it is due to the dependency injection of the service into the component done through its (component's) constructor.

In short, injecting the service like this,

constructor(private starService: StarService) { }

as per the docs ,

A provider is something that can create or deliver a service. Angular creates a service instance from a class provider by using new .

will under the hood assign the private starService property to,

private starService = new StarService();

which will call the service's constructor.

If you don't want any default actions to happen every time the service is injected, then don't perform any property assignments within its (service's) constructor.

And, every time you switch between components through its routes, the corresponding component gets created by calling its constructor and the corresponding lifecycle hooks it has implemented. Hence it will also create the corresponding dependencies defined within their constructors as well. Hope it makes sense now.