title: Angular injected service is not singltone
body: <p>I created a new angular project with two components, app component and TempComponent, and a service called TempService.</p>
  
  <p>I wish to inject this service to both components as a singleton. The components and the service are all in the same module and I register the service in the module's "providers" array. However each time the component is created the service's ctor is called as well(and not once as I expected and rad online). I can't find the problem. </p>
  
  <p>The service:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  
  @Injectable()
  export class TempService{
      constructor(){
          console.log("TEmp Service was created");
      }
  }
  </code></pre>
  
  <p>The components:</p>
  
  <pre><code>export class AppComponent {
    constructor(private tmp:TempService){}
  }
  
  export class TempComponent{
      constructor(private tmp:TempService){}
  }
  </code></pre>
  
  <p>The module:</p>
  
  <pre><code>const appRoutes: Routes = [
    { path: 'temp', component: TempComponent }
  ];
  @NgModule({
    declarations: [
      AppComponent,
      TempComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(
        appRoutes,
        { enableTracing: false } // &lt;-- debugging purposes only
      )
    ],
    providers: [TempService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Any suggestions? Thanks!</p>