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

Most upvoted comments

Same issue

This should have a higher priority…

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.

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

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 😦

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

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

the issue is occurring on the mat tree too