components: Angular Material Table Error - Cannot read property 'find' of undefined ...

Bug, feature request, or proposal:

Possible bug. Something changed in Angular Material 6 and was a breaking change for my project.

My table was working fine since it was introduced in Angular Material. I upgraded from Angular 5 to 6 and now I get this error when rendering the table:

TypeError: Cannot read property ‘find’ of undefined at MatHeaderRowDef.ngOnChanges (table.js:47)

No data is yet loaded, a button does that. When I click the button:

TypeError: Cannot read property ‘diff’ of undefined at MatRowDef.getColumnsDiff (table.js:57)

If I comment out a column then the error throws for the next column above it in the table so that all columns will produce this error, only one column at each render though.

The offending code in webpack:///./node_modules/@angular/cdk/esm2015/table.js:

    ngOnChanges(changes) {
        // Create a new columns differ if one does not yet exist. Initialize it based on initial value
        // of the columns property or an empty array if none is provided.
        const /** @type {?} */ columns = changes['columns'].currentValue || [];
        if (!this._columnsDiffer) {
Line 47:            this._columnsDiffer = this._differs.find(columns).create();
            this._columnsDiffer.diff(columns);
        }
    }

My table (shortened to two columns):

     <mat-table #table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="firstName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef> First Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row"> {{row.first_name}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="lastName">
          <mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell fxFlex="10%" *matCellDef="let row">  {{row.last_name}} </mat-cell>
        </ng-container>

       ...
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

     </mat-table>

    <mat-paginator #paginator
                   [pageIndex]="0"
                   [pageSize]="5"
                   [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>

In the component.ts file:

import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

  private displayedColumns = [
    'firstName',
    'lastName',
    ...
    ];

    ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
    }

What is the expected behavior?

Table should compile with this error.

What is the current behavior?

The problem may be related to this closed issue but a bit different: https://github.com/angular/material2/issues/6831

What are the steps to reproduce?

My first try with Stackblitz, never used Plunker, so probably something wrong. I shortened my code to just the problem code for the table. The error message goes away if I comment out the table. Other items on the page such as search don’t affect this.

https://stackblitz.com/edit/angular-material2-issue-yp6jrt

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.0.3
Node: 8.11.2
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cdk                      6.0.0
@angular/cli                      6.0.3
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.0.0
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Is there anything else we should know?

I followed upgrade.angular.io and used these magic lines in terminal:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

I don’t see how this could have affected my table. I suspect that something was changed for AM 6 and is causing a bug under some circumstances. My setup seems rather typical though.