title: Angular 5 Service As singleton
body: <p>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:</p>
  
  <p><strong>App Module:</strong></p>
  
  <pre><code>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 {
  }
  </code></pre>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>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");
  }
  }
  </code></pre>
  
  <p><strong>Star Report Component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { StarService } from '../star-service/star-service'
  @Component({
    selector: 'app-star-report',
    templateUrl: '&lt;p&gt;{{getReport}}&lt;/p&gt;',
    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;
    }
   }
  </code></pre>
  
  <p><strong>Star Search Component</strong> </p>
  
  <pre><code> 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;
   }
   }
  </code></pre>
  
  <p>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</p>