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.