title: TypeError when creating a new MatTable with Angular Material 2
body: <p>I'm creating a table using <code>mat-table</code> (from <code>MatTableModule</code>) but I'm getting the following error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'addClass' of undefined
    at MatHeaderCell.CdkHeaderCell (table.es5.js:275)
    at new MatHeaderCell (table.es5.js:132)
    at createClass (core.js:12166)
    at createDirectiveInstance (core.js:12011)
    at createViewNodes (core.js:13449)
    at createEmbeddedView (core.js:13327)
    at callWithDebugContext (core.js:14740)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:14070)
    at TemplateRef_.createEmbeddedView (core.js:11414)
    at ViewContainerRef_.createEmbeddedView (core.js:11130)
  </code></pre>
  
  <p>The error in the console appears related to the first occurrence of <code>&lt;mat-header-cell *matHeaderCellDef&gt; ID &lt;/mat-header-cell&gt;</code> tag.</p>
  
  <hr>
  
  <p>I can't understand what is not working since the same code worked like a charm until yesterday evening.</p>
  
  <p>The table in the component.html file</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource" style="text-align:center"&gt;
      &lt;!-- Id Column --&gt;
      &lt;ng-container matColumnDef="id"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; ID &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.id}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;!-- Creation date Column --&gt;
      &lt;ng-container matColumnDef="created"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Created &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.created}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;!-- Device ID Column --&gt;
      &lt;ng-container matColumnDef="deviceId"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Device ID &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.deviceId}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;!-- Failures Column --&gt;
      &lt;ng-container matColumnDef="failures"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; No. Failures &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.failures}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>In my component TypeScript file I defined data as:</p>
  
  <pre><code>export class MyComponent implements OnInit {
    displayedColumns = ['id', 'created', 'deviceId', 'failures'];
    dataSource:MatTableDataSource&lt;Element&gt;;
  
    constructor() { }
  
    ngOnInit() {
      this.dataSource = new MatTableDataSource&lt;Element&gt;(ELEMENTS);
    }
  }
  
  export interface Element {
    id: string;
    created: string;
    deviceId: string;
    failures: number;
  }
  const ELEMENTS: Element[] = [
    {id: 'Hydrogen', created: "123", deviceId: "ABC123", failures: 0},
    {id: 'Helium', created: "123", deviceId: "123ABC", failures: 3},
    {id: 'Lithium', created: "123", deviceId: "ABCEF5", failures: 0},
    {id: 'Beryllium', created: "123", deviceId: "ABC123", failures: 2},
    {id: 'Boron', created: "123", deviceId: "67ABC3", failures: 0},
  ];
  </code></pre>
  
  <p>So, apparently, data in TS and table cells in HTML are matched, what is causing this error to show up?</p>
  
  <hr> 
  
  <p><strong>Update</strong></p>
  
  <p>Used library versions from <code>package.json</code>:</p>
  
  <ul>
  <li><code>@angular/cdk</code>: <code>^5.0.0-rc.1</code>;</li>
  <li><code>@angular/material</code>: <code>^5.0.0-rc.2</code>;</li>
  </ul>