title: Inject the instance of a component in a service
body: <p>For a any good reaon, I am trying to inject my component into a service, but I obtain a new instance of it. I reproduce my problem with this code : </p>
  
  <p>This component will display the instance number in <code>h1</code> : </p>
  
  <pre><code>@Component({
      selector: 'my-component',
      template: '&lt;h1&gt;Instance number {{count}}&lt;/h1&gt;'
  })
  export class MyComponent {
      private static i = 0;               /* &lt;-- counts the myComponent's instances here */
      private _count: number = i++;
      get count(): number {return this._count}
  }
  </code></pre>
  
  <p>The Service will log the instance number in console: </p>
  
  <pre><code>@Injectable()
  export class MyService {
      constructor(myComponent: MyComponent) {
          console.log("Instance number " + myComponent.count);
      }
  }
  </code></pre>
  
  <p>The main component will inject the component in a view and the service : </p>
  
  <pre><code>@Component({
      selector: 'app-root',
      template: '&lt;my-component&gt;&lt;/my-component&gt;',
  })
  export class AppComponent {
      constructor(service: MyService) {
      }
  }
  </code></pre>
  
  <p>I'm using angular-cli, my app.module.ts looks : </p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      MyComponent
    ],
    imports: [
      BrowserModule,
    ],
    providers: [MyComponent, MyService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Currently, my console displays <code>Instance number 0</code> and my html display <code>Instance number 1</code>.
  How can I obtain the same instance ?</p>
  
  <p>Thanks for reading me</p>