fix(table): Clarify unknown table column error (#14947)

Throwing error when column not found in _addStickyColumnStyles to avoid weird error of
"Cannot read property 'sticky' of undefined".

Author: CaptainCow95

src/cdk/table/table.spec.ts

@@ -7,7 +7,8 @@ import {
   Input,
   QueryList,
   Type,
-  ViewChild
+  ViewChild,
+  AfterViewInit
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {BehaviorSubject, combineLatest, Observable, of as observableOf} from 'rxjs';
@@ -538,6 +539,17 @@ describe('CdkTable', () => {
         .toThrowError(getTableUnknownColumnError('column_a').message);
   });
 
+  it('should throw an error if a column definition is requested but not defined after render',
+      fakeAsync(() => {
+        const columnDefinitionMissingAfterRenderFixture =
+            createComponent(MissingColumnDefAfterRenderCdkTableApp);
+        expect(() => {
+          columnDefinitionMissingAfterRenderFixture.detectChanges();
+          flush();
+          columnDefinitionMissingAfterRenderFixture.detectChanges();
+        }).toThrowError(getTableUnknownColumnError('column_a').message);
+  }));
+
   it('should throw an error if the row definitions are missing', () => {
     expect(() => createComponent(MissingAllRowDefsCdkTableApp).detectChanges())
         .toThrowError(getTableMissingRowDefsError().message);
@@ -1974,6 +1986,28 @@ class MissingColumnDefCdkTableApp {
   dataSource: FakeDataSource = new FakeDataSource();
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_b">
+        <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: displayedColumns"></cdk-row>
+    </cdk-table>
+  `
+})
+class MissingColumnDefAfterRenderCdkTableApp implements AfterViewInit {
+  dataSource: FakeDataSource|null = null;
+  displayedColumns: string[] = [];
+
+  ngAfterViewInit() {
+    setTimeout(() => { this.displayedColumns = ['column_a']; }, 0);
+  }
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource">

src/cdk/table/table.ts

@@ -852,7 +852,13 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
 
   /** Adds the sticky column styles for the rows according to the columns' stick states. */
   private _addStickyColumnStyles(rows: HTMLElement[], rowDef: BaseRowDef) {
-    const columnDefs = Array.from(rowDef.columns || []).map(c => this._columnDefsByName.get(c)!);
+    const columnDefs = Array.from(rowDef.columns || []).map(columnName => {
+      const columnDef = this._columnDefsByName.get(columnName);
+      if (!columnDef) {
+        throw getTableUnknownColumnError(columnName);
+      }
+      return columnDef!;
+    });
     const stickyStartStates = columnDefs.map(columnDef => columnDef.sticky);
     const stickyEndStates = columnDefs.map(columnDef => columnDef.stickyEnd);
     this._stickyStyler.updateStickyColumns(rows, stickyStartStates, stickyEndStates);