components: [Table] Does not work when targetting ES6

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Table appears in browser.

What is the current behavior?

Table doesn’t appear. Error message in console:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (table.js:438)
    at new MatTable (table.js:26)
    at createClass (core.js:10365)
    at createDirectiveInstance (core.js:10212)
    at createViewNodes (core.js:11672)
    at callViewAction (core.js:12106)
    at execComponentViewsAction (core.js:12015)
    at createViewNodes (core.js:11700)
    at createRootView (core.js:11561)
    at callWithDebugContext (core.js:12927)

What are the steps to reproduce?

Create a new angular 5 project. Add the example code from material.angular.io for mat-table.

It should run fine.

Now go into tsconfig.json and target something higher than es5. Boom.

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

Projects targeting > es5.

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

Angular 5+, Material 5-rc0 - 5.0.4, TS 2.4.2 Windows 7 64bit Chrome

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 18 (6 by maintainers)

Commits related to this issue

fix(table): not rendering properly in es2015 apps Fixes that the table does not render properly when used inside of a ES2015 application. This is due to an ongoing Angular issue which has been caused... — committed to devversion/material2 by devversion 6 years ago
fix: ensure components work with ES2015 in jit mode. Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue which ha... — committed to devversion/material2 by devversion 6 years ago
fix: ensure components work with ES2015 in jit mode. (#12759) Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue... — committed to angular/components by devversion 6 years ago
fix: ensure components work with ES2015 in jit mode. (#12759) Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue... — committed to angular/components by devversion 6 years ago

Most upvoted comments

Same issue

NaifousBS on Jan 17, 2018

This should have a higher priority…

wiedikerli on Feb 16, 2018

Looks like this is an issue in the Angular compiler. The MatTable extends CdkTable and should receive the same constructor dependency injection. Unfortunately this does not seem to be the case when targetting ES6. See the open issue for more information.

andrewseguin on Jan 23, 2018

@WilliamCrossSkymantics you need to revert angular material to 6.4.1 to mitigate the issue.

Lukespacewalker on Aug 12, 2018

In the beginning i got the same errors as OP so i downgraded my @angular/material to 6.4.1 which needed @angular/cdk to be 6.4.1 too, so i did that. The errors where gone but now i get this error: ERROR TypeError: Cannot read property ‘runOutsideAngular’ of undefined at new MatDrawer (sidenav.js:177) at new MatSidenav (sidenav.js:856)

this seems so random, like Angular always wants to find a new error 😦

hopsinat on Aug 22, 2018

@AnilGoudar use “ng serve --aot” can work, JIT will get this issue

TzuHuanTai on Aug 20, 2018

Has this issue been fixed for MatRowDefs? We are currently getting what seems to be the same bug, and have updated to the most recent version of Material

Error context:

ERROR TypeError: Cannot read property ‘find’ of undefined at MatRowDef.ngOnChanges (table.js:324) at checkAndUpdateDirectiveInline (core.js:11642) at checkAndUpdateNodeInline (core.js:13252) at checkAndUpdateNode (core.js:13191) at debugCheckAndUpdateNode (core.js:14147) at debugCheckDirectivesFn (core.js:14090) at Object.eval [as updateDirectives] (GateagentComponent.html:69) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14078) at checkAndUpdateView (core.js:13156) at callViewAction (core.js:13521)

Angular CLI: 6.0.8 Node: 8.11.3 OS: win32 x64 Angular: 6.1.2 … animations, common, core, forms, http, platform-browser … platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8 @angular-devkit/build-angular 0.6.8 @angular-devkit/build-optimizer 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @angular/cdk 6.4.3 @angular/cli 6.0.8 @angular/compiler 6.1.0 @angular/compiler-cli 6.1.0 @angular/language-service 6.1.0 @angular/material 6.4.3 @ngtools/webpack 6.0.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.2 typescript 2.9.2 webpack 4.8.3

Browser: Chrome

WilliamCrossSkymantics on Aug 10, 2018

the issue is occurring on the mat tree too

TzuHuanTai on Jul 20, 2018

also relate to https://github.com/angular/material2/issues/9813

lacolaco on Feb 21, 2018