angular 2 inheriting from a base-component
<p>My question is an extension to another question here on so: <a href="https://stackoverflow.com/questions/36063627/angular2-and-class-inheritance-support/37041446?noredirect=1#comment64033183_37041446">Angular2 and class inheritance support</a></p>

<p>And here is my plunckr:
<a href="http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview" rel="noreferrer">http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview</a></p>

<p>What I am trying to do is the following:</p>

<p>I have some common functionallity whcih all of my components will have to use. As it already has been answered in the aforementioned question, this can be done.</p>

<p>My question is: Can I have dependencies injected in the base-component? In my plunkr the declared dependency (<code>FormBuilder</code>) is undefined when logged to console.</p>

<pre><code>import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';



@Component({
  providers: [FormBuilder]
})
export class BaseComponent {
  // Interesting stuff here
  @Input() id: string;

  constructor(formBuilder: FormBuilder){
    console.log(formBuilder);
    console.log('inside the constructor');
  }


}

@Component({
  selector: 'child-comp2',
  template: '&lt;div&gt;child component #2 ({{id}})&lt;/div&gt;',
  providers: [provide(BaseComponent, { useExisting: forwardRef(() =&gt; ChildComponent2) })]
})
export class ChildComponent2 extends BaseComponent {


}

@Component({
  selector: 'child-comp1',
  template: '&lt;div&gt;child component #1 ({{id}})&lt;/div&gt;',
  providers: [provide(BaseComponent, { useExisting: forwardRef(() =&gt; ChildComponent1) })]
})
export class ChildComponent1 extends BaseComponent {


}

@Component({
  selector: 'parent-comp',
  template: `&lt;div&gt;Hello World&lt;/div&gt;
   &lt;p&gt;Number of Child Component 1 items: {{numComp1}}
   &lt;p&gt;Number of Child Component 2 items: {{numComp2}}
   &lt;p&gt;Number of Base Component items: {{numBase}}
   &lt;p&gt;&lt;ng-content&gt;&lt;/ng-content&gt;
   &lt;p&gt;Base Components:&lt;/p&gt;
   &lt;ul&gt;
    &lt;li *ngFor="let c of contentBase"&gt;{{c.id}}&lt;/li&gt;
   &lt;/ul&gt;
  `
})
export class ParentComponent implements AfterContentChecked  {

  @ContentChildren(ChildComponent1) contentChild1: QueryList&lt;ChildComponent1&gt;
  @ContentChildren(ChildComponent2) contentChild2: QueryList&lt;ChildComponent2&gt;
  @ContentChildren(BaseComponent) contentBase: QueryList&lt;BaseComponent&gt;
  public numComp1:number
  public numComp2:number
  public numBase:number

  ngAfterContentChecked() {
    this.numComp1 = this.contentChild1.length
    this.numComp2 = this.contentChild2.length
    this.numBase = this.contentBase.length
  }
}

@Component({
  selector: 'my-app',
  template: `&lt;parent-comp&gt;
      &lt;child-comp1 id="A"&gt;&lt;/child-comp1&gt;
      &lt;child-comp1 id="B"&gt;&lt;/child-comp1&gt;
      &lt;child-comp2 id="C"&gt;&lt;/child-comp2&gt;
    &lt;/parent-comp&gt;
  `,
  directives: [ParentComponent, ChildComponent1, ChildComponent2]
})
export class MyApplication  {

}
</code></pre>