[Table] Does not work when targetting ES6 #9329

MaddMugsy · 2018-01-11T00:43:36Z

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

The text was updated successfully, but these errors were encountered:

NaifousBS · 2018-01-17T08:47:30Z

Same issue

andrewseguin · 2018-01-23T19:58:20Z

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.

wiedikerli · 2018-02-16T10:52:10Z

This should have a higher priority...

lacolaco · 2018-02-21T03:37:02Z

also relate to #9813

andrewseguin · 2018-02-23T00:49:52Z

Looks like the fix has been made in Angular

Markus-Ende · 2018-04-11T15:14:46Z

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

andrewseguin · 2018-04-24T15:49:52Z

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

andrewseguin · 2018-04-24T20:34:41Z

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.

angular/tsickle#760

I'm updating the compiler-cli to the version that will support this: angular/angular#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 · 2018-05-03T17:09:16Z

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

TzuHuanTai · 2018-07-20T14:46:23Z

the issue is occurring on the mat tree too

WilliamCrossSkymantics · 2018-08-10T21:54:19Z

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 · 2018-08-12T16:13:06Z

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

WilliamCrossSkymantics · 2018-08-13T17:55:29Z

Excellent, that fixed the issue. Thanks @Lukespacewalker!

ghost · 2018-08-18T16:54:56Z

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

TzuHuanTai · 2018-08-20T01:27:48Z

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

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 due to a brittle Regex check [introduced here](angular/angular#22356 (comment)) that should be replaced with a more clean approach for identifying classes that inherit metadata from another class. * angular/angular#22642 * angular/tsickle#760 Fixes angular#9329

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 has been caused due to a brittle Regex check [introduced here](angular/angular#22356 (comment)) that should be replaced with a more clean approach for identifying classes that inherit metadata from another class. * angular/angular#22642 * angular/tsickle#760 See the more detailed issue here: angular#12760 Fixes angular#9329.

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 has been caused due to a brittle Regex check [introduced here](angular/angular#22356 (comment)) that should be replaced with a more clean approach for identifying classes that inherit metadata from another class. * angular/angular#22642 * angular/tsickle#760 See the more detailed issue here: #12760 Fixes #9329.

hopsinat · 2018-08-22T10:58:24Z

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 · 2018-08-22T11:50:15Z

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.

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 has been caused due to a brittle Regex check [introduced here](angular/angular#22356 (comment)) that should be replaced with a more clean approach for identifying classes that inherit metadata from another class. * angular/angular#22642 * angular/tsickle#760 See the more detailed issue here: #12760 Fixes #9329.

angular-automatic-lock-bot · 2019-09-09T11:02:56Z

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.}

josephperrott assigned andrewseguin Jan 16, 2018

jtsom mentioned this issue Jan 20, 2018

Simple Material Table Throwing Errors #9492

Closed

andrewseguin mentioned this issue Jan 23, 2018

Extended components do not receive constructor arguments when targetting ES6 angular/angular#21731

Closed

andrewseguin changed the title ~~Bug: mat-table TypeError when targeting >es5~~ [Table] Does not work when targetting ES6 Jan 23, 2018

andrewseguin added the P4 A relatively minor issue that is not relevant to core functions label Jan 23, 2018

andrewseguin closed this as completed Feb 23, 2018

andrewseguin reopened this Apr 24, 2018

andrewseguin added P2 The issue is important to a large percentage of users, with a workaround and removed P4 A relatively minor issue that is not relevant to core functions labels Apr 24, 2018

andrewseguin mentioned this issue Apr 24, 2018

build(table): explicitly define MatTable ctor #10982

Merged

andrewseguin closed this as completed in #10982 Apr 25, 2018

andrewseguin reopened this May 3, 2018

andrewseguin mentioned this issue May 9, 2018

fix(table): add missing constructors #11252

Merged

jelbourn closed this as completed in #11252 May 10, 2018

andrewseguin mentioned this issue May 21, 2018

Angular Material Table Error - Cannot read property 'find' of undefined ... #11427

Closed

jelbourn reopened this Aug 20, 2018

jelbourn assigned devversion and unassigned andrewseguin Aug 20, 2018

devversion mentioned this issue Aug 20, 2018

fix: ensure components work with ES2015 in jit mode #12759

Merged

devversion added the has pr label Aug 20, 2018

devversion mentioned this issue Aug 20, 2018

Dependency injection not working for derived classes in ES2015 #12760

Closed

jelbourn closed this as completed in #12759 Aug 21, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Table] Does not work when targetting ES6 #9329

[Table] Does not work when targetting ES6 #9329

MaddMugsy commented Jan 11, 2018 •

edited

Loading

NaifousBS commented Jan 17, 2018

andrewseguin commented Jan 23, 2018

wiedikerli commented Feb 16, 2018

lacolaco commented Feb 21, 2018

andrewseguin commented Feb 23, 2018

Markus-Ende commented Apr 11, 2018

andrewseguin commented Apr 24, 2018

andrewseguin commented Apr 24, 2018

andrewseguin commented May 3, 2018

TzuHuanTai commented Jul 20, 2018

WilliamCrossSkymantics commented Aug 10, 2018

Lukespacewalker commented Aug 12, 2018

WilliamCrossSkymantics commented Aug 13, 2018

ghost commented Aug 18, 2018

TzuHuanTai commented Aug 20, 2018

hopsinat commented Aug 22, 2018

hopsinat commented Aug 22, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

[Table] Does not work when targetting ES6 #9329

[Table] Does not work when targetting ES6 #9329

Comments

MaddMugsy commented Jan 11, 2018 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

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

NaifousBS commented Jan 17, 2018

andrewseguin commented Jan 23, 2018

wiedikerli commented Feb 16, 2018

lacolaco commented Feb 21, 2018

andrewseguin commented Feb 23, 2018

Markus-Ende commented Apr 11, 2018

andrewseguin commented Apr 24, 2018

andrewseguin commented Apr 24, 2018

andrewseguin commented May 3, 2018

TzuHuanTai commented Jul 20, 2018

WilliamCrossSkymantics commented Aug 10, 2018

Package Version

Lukespacewalker commented Aug 12, 2018

WilliamCrossSkymantics commented Aug 13, 2018

ghost commented Aug 18, 2018

TzuHuanTai commented Aug 20, 2018

hopsinat commented Aug 22, 2018

hopsinat commented Aug 22, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

MaddMugsy commented Jan 11, 2018 •

edited

Loading