Components: [Table] Does not work when targetting ES6

[MaddMugsy]

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

[NaifousBS]

Same issue

[andrewseguin]

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.

[ninjaonsafari]

This should have a higher priority...

[lacolaco]

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

[andrewseguin]

Looks like the fix has been made in Angular

[Markus-Ende]

Have the same error with angular 5.2.9 and material 5.2.4.
@andrewseguin which version did you try?

[andrewseguin]

@Markus-Ende Confirmed that this issue is still present in v5 and v6 :(

[andrewseguin]

Cool bug - we are using Angular's compiler-cli to bundle up our es6 code. It uses tsickle, but the version it is on does not know how to support this case.

https://github.com/angular/tsickle/pull/760

I'm updating the compiler-cli to the version that will support this: https://github.com/angular/angular/pull/23531

In the meantime, I'm going to create a pull request that forces this to be fixed in our code. Thanks for reporting that the issue is still here. Turns out the other PR was something of a coincidence

[andrewseguin]

Re-opening, looks like the issue is occurring on the row defs as well

[TzyHuan]

the issue is occurring on the mat tree too

[WilliamCrossSkymantics]

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

[Lukespacewalker]

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

[WilliamCrossSkymantics]

Excellent, that fixed the issue. Thanks @Lukespacewalker!

[ghost]

I am also facing the same issue while using material table in my project, here is the error message,

ERROR TypeError: Cannot read property 'find' of undefined at MatHeaderRowDef.ngOnChanges (table.js:324) at MatHeaderRowDef.ngOnChanges (table.js:376) 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] (LocationInfoWindowComponent.html:18) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14078) at checkAndUpdateView (core.js:13156)

Development Environment:

Angular CLI: 6.1.3
Node: 8.10.0
OS: linux x64
Angular: 6.1.2

Package Version:
"dependencies": {
"@agm/core": "^1.0.0-beta.3",
"@agm/snazzy-info-window": "^1.0.0-beta.3",
"@angular/animations": "^6.0.5",
"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.5",
"@angular/compiler": "^6.0.5",
"@angular/core": "^6.0.5",
"@angular/flex-layout": "^6.0.0-beta.16",
"@angular/forms": "^6.0.5",
"@angular/http": "^6.0.5",
"@angular/material": "^6.2.1",
"@angular/material-moment-adapter": "^6.3.1",
"@angular/platform-browser": "^6.0.5",
"@angular/platform-browser-dynamic": "^6.0.5",
"@angular/router": "^6.0.5",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"@ngx-translate/core": "^10.0.1",
"@ngx-translate/http-loader": "^3.0.1",
"@swimlane/ngx-charts": "^8.1.0",
"@types/googlemaps": "^3.30.8",
"angular-material": "^1.1.9",
"chart.js": "^2.7.2",
"core-js": "^2.5.5",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"moment": "^2.22.2",
"ng2-charts": "^1.6.0",
"ng4-loading-spinner": "^1.1.3",
"ngx-loading": "^1.0.14",
"ngx-toastr": "^8.8.0",
"npm": "^6.1.0",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.0.0-rc.0",
"snazzy-info-window": "^1.1.1",
"yarn": "^1.6.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.5",
"@angular/language-service": "^6.0.5",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^9.6.1",
"codelyzer": "~4.2.1",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^1.0.0",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.0"
}

Browser : Chrome and Firefox

[TzyHuan]

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

[hopsinat]

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]

i ran the following command which worked: ng serve --aot --port 1234
This worked literally for a few minutes, after i pressed CTRL F5 for the fourth time it threw a wall full of errors. Why? For no reason - all i changed was css and html.

[angular-automatic-lock-bot[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._}