Simple Material Table Throwing Errors

[jtsom]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Show a table

What is the current behavior?

Throw error:

StudentListComponent.html:4 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (table.js:458)
    at new MatTable (table.js:26)
    at createClass (core.js:10363)
    at createDirectiveInstance (core.js:10210)
    at createViewNodes (core.js:11667)
    at callViewAction (core.js:12101)
    at execComponentViewsAction (core.js:12010)
    at createViewNodes (core.js:11695)
    at callViewAction (core.js:12101)
    at execComponentViewsAction (core.js:12010)
View_StudentListComponent_0 @ StudentListComponent.html:4
proxyClass @ compiler.js:12102
logError @ core.js:12863
handleError @ core.js:1422
ngZone.runOutsideAngular @ core.js:4660
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
runOutsideAngular @ core.js:3937
result.catch @ core.js:4660
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3988
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3979
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
ZoneAwarePromise.then @ zone.js:946
bootstrapModule @ core.js:4578
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:106
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:121
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
StudentListComponent.html:4 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 7, nodeDef: {…}, elDef: {…}, elView: {…}}
View_StudentListComponent_0 @ StudentListComponent.html:4
proxyClass @ compiler.js:12102
logError @ core.js:12863
handleError @ core.js:1427
ngZone.runOutsideAngular @ core.js:4660
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
runOutsideAngular @ core.js:3937
result.catch @ core.js:4660
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3988
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3979
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
ZoneAwarePromise.then @ zone.js:946
bootstrapModule @ core.js:4578
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:106
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:121
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
main.ts:12 TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (table.js:458)
    at new MatTable (table.js:26)
    at createClass (core.js:10363)
    at createDirectiveInstance (core.js:10210)
    at createViewNodes (core.js:11667)
    at callViewAction (core.js:12101)
    at execComponentViewsAction (core.js:12010)
    at createViewNodes (core.js:11695)
    at callViewAction (core.js:12101)
    at execComponentViewsAction (core.js:12010)

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/uDmqyY

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

I was able to reproduce the error by opening the "Open In StackBlitz" link on the first sample on this page: https://material.angular.io/components/table/overview, then copy and pasting the code in the .html file and the .ts file of the component into a new project. I am seeing the same problem.

Simple table:

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

    <ng-container matColumnDef="studentId">
      <mat-header-cell *matHeaderCellDef> Student Id </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.studentId}} </mat-cell>
    </ng-container>

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

dataSource is a simple Observable of values.

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

Angular CLI: 1.6.5
Node: 9.4.0
OS: darwin x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.0
@angular/cli: 1.6.5
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0

Is there anything else we should know?

[jtsom]

Looks like this is the problem: #9329

Closing this one.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}