title: Angular 2 nested injection
body: <p>I am struggling with angular2's dependency injection. In my example I have two Services. </p>
  
  <ul>
  <li>Service1 injects Service2 and gets data from it.</li>
  <li>A Component injects Service1 and fetches the data from Service1</li>
  </ul>
  
  <p>I have to provide Service2 in my Component</p>
  
  <pre><code>@Component({
    providers: [Service1, Service2]
  })
  </code></pre>
  
  <p><strong>But why? I injected Service2 in Service1. Why do I have to provide Service2 in my Component, when there's no reference to Service2 in my Component?</strong> </p>
  
  <p>I am aware, that I could provide services in my bootsrap function, but I would like to provide my Services to my Component...</p>
  
  <pre><code>bootstrap(AppComponent, [... Service1, Service2])
  </code></pre>
  
  <p>Here is my example code, which is not working because of the missing provider</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import {Service1} from "service1.ts";    
  
  @Component({
    providers: [Service1]
  })
  export class Component{
    constructor(private s: Service1) {
      //get data from Service1
    }
  }
  </code></pre>
  
  <p><strong>service1.ts</strong></p>
  
  <pre><code>import {Service2} from "service2.ts";
  
  @Injectable()
  export class service1{
    constructor(private s2: Service2) {
      //get data from service2
      //edit data
      //return data
    }
  }
  </code></pre>
  
  <p><strong>service2.ts</strong></p>
  
  <pre><code>@Injectable()
  export class service2{
    constructor() {
      //return data
    }
  }
  </code></pre>