I'm having trouble to get a `@ViewChild` annotated field properly initialized under following circumstance:

A `@ViewChild` annotated field stays `undefined` under certain circumstances:

* Parent component of type `X` implements abstract base class of type `XBase`, which has three abstract fields
* Component of type `X` annotates these field with `@ChildView` of types `A`, `B` and `C`
* `C` in turn also extends `XBase`, but uses a different template and selector than `X`
* Fields of type `A` and `B` get propery initialized in component of type `X`
* Field of type `C` stays undefined

**This is the shortened version of my code**

```
@Component({
    moduleId: module.id,
    selector: 'drive-view'
    templateUrl: './../../html/drive-view.html'
})   
export class DriveViewComponent extends GridView<Drive>
{
    @ViewChild(DriveGridComponent)
    public grid: DriveGridComponent;

    @ViewChild(DriveDetailsComponent)
    public itemDetails: DriveDetailsComponent;

    @ViewChild(DriveFilterModalComponent)
    public filterModal: DriveFilterModalComponent;

    @ViewChild(DriveMembersModalComponent)
    public driveMembersModal: DriveMembersModalComponent;
}

export abstract class GridView<TEntity>
{
    public abstract grid: Grid<TEntity>;
    public abstract filterModal: IGridFilterModal;
    public abstract itemDetails: IGridItemDetails<TEntity>;
}

export abstract class Grid<TEntity>
{
    public abstract header: IGridHeader;
    public abstract body: IGridBody<TEntity>;
}

@Component({
    moduleId: module.id,
    selector: '[drive-grid]',
    templateUrl: './../../html/grid.html'
})    
export class DriveGridComponent extends Grid<Drive>
{
    @ViewChild(DriveGridHeaderComponent)
    public header: DriveGridHeaderComponent;

    @ViewChild(DriveGridBodyComponent)
    public body: DriveGridBodyComponent;
}

@Component({
    moduleId: module.id,
    selector: 'thead [grid-header]',
    templateUrl: './../../html/drive-grid-header.html'
})
export class DriveGridHeaderComponent implements IGridHeader
{
    // nothing to see here...
}

@Component({
    moduleId: module.id,
    selector: 'tbody [grid-body]',
    templateUrl: './../../html/drive-grid-body.html'
})
export class DriveGridBodyComponent implements IGridBody<Drive>
{
    // nothing to see here...
}

@Component({
    moduleId: module.id,
    selector: '[drive-members-modal]',
    templateUrl: './../../html/drive-members-modal.html'
})
export class DriveMembersModalComponent extends GridView<User> 
{
    @ViewChild(UserGridComponent)
    public grid: UserGridComponent;
}

@Component({
    moduleId: module.id,
    selector: '[user-grid]',
    templateUrl: './../../html/grid.html'
})
export class UserGridComponent extends Grid<User>
{ 
    @ViewChild(UserGridHeaderComponent)
    public header: UserGridHeaderComponent;

    @ViewChild(UserGridBodyComponent)
    public body: UserGridBodyComponent;
}

```

`UserGridHeaderComponent` and `UserGridBodyComponent` are equivalent to the `Drive-`Components.

And here are the relevant parts of html templates:

**drive-view.html**

```
<div class="row">
    <div class="col-lg-12"
         drive-filter-modal
         (onFilterApplyButtonEmitter)="onFilterApplyButton()">
    </div>
</div>
<div class="row">
    <div class="col-lg-12"
         drive-members-modal>
    </div>
</div>
<div class="row" [hidden]="!grid.body?.items">
    <div class="col-lg-12"
          drive-grid
          (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"
          (onDetailsButtonEmitter)="onDetailsButton($event)">
    </div>
</div>
<div class="row"
     id="row-grid-item-details">
    <div class="col-lg-12"
         [@detailsSlideUpDown]="itemDetails.fadeInOutStatus">
        <item-details (onOpenModalEmitter)="onDriveMembersButton()"></item-details>
    </div>
</div>

```

**grid.html**

```
<div class="table-responsive">
  <table class="grid table table-hover">
    <thead grid-header (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"></thead>
    <tbody grid-body (onDetailsButtonEmitter)="onDetailsButton($event)"
           [ngClass]="{'fadeIn': body?.items, 'fadeOut': !body?.items}"
           class="animated"></tbody>
  </table>
</div>

```

**drive-members-modal.html**

```
<div class="modal fade" id="drive-members-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Members of 'NAME'</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12"
                         user-grid
                         (onColumnHeaderToggledEmitter)="onColumnHeaderToggled($event)"
                         (onDetailsButtonEmitter)="onDetailsButton($event)">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-chevron-left"></span> Back
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

```

So what I'm trying to do is to reuse the `GridView<T>` in shape of the `DriveMembersModalComponent` within the `DriveViewComponent`. It is supposed to render a similar grid within the bootstrap modal that pops up, when the user wants to view the members of a drive. 

However `DriveViewComponent`'s `driveMembersModal` does not get fully initialized. Its

```
@ViewChild(UserGridComponent)
public grid: UserGridComponent;

```

stays undefined. It seems like angular can't find a matching element in the template. I've tried with different selectors with no effect. I've also tried the `@ViewChild(<reference>)` syntax, where a `#reference` attribute is added to the element. However this gives me a `ElementRef`, which I don't know how to handle. It appears to be just a DOM-reference, but not an angular component.

**EDIT:**

I've created a plunker example from my app: <https://embed.plnkr.co/083a5AnkaiCG796adTkR/>

Follow these instructions to reproduce the error:

* Open up your browser's debug mode to see the console output
* Click on the "Drives" tab
* The console will print the `DriveMembersModalComponent`, it corresponds to component `C` mentioned above. The `grid` field is `undefined`. The print is executed in the `DriveViewComponent`'s `ngAfterViewInit()`