Description
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