table: tsconfig target es6 causes `_elementRef` failure during table creation

[epelc]

Bug, feature request, or proposal:

Seems like all of my uses of <mat-table> and <table mat-table> broke with an undefined elementRef after upgrading from 6.1.x to 7.0.0 using ng update.

What is the expected behavior?

Tables should render and not throw an error on start.

What is the current behavior?

I receive the following error.

core.js:15043 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
 at new CdkTable (table.js:1071)
 at new MatTable (table.js:28)
 at createClass (core.js:23001)
 at createDirectiveInstance (core.js:22828)
 at createViewNodes (core.js:24376)
 at callViewAction (core.js:24825)
 at execComponentViewsAction (core.js:24731)
 at createViewNodes (core.js:24405)
 at callViewAction (core.js:24825)
 at execComponentViewsAction (core.js:24731)
 at new CdkTable (table.js:1071)
 at new MatTable (table.js:28)
 at createClass (core.js:23001)
 at createDirectiveInstance (core.js:22828)
 at createViewNodes (core.js:24376)
 at callViewAction (core.js:24825)
 at execComponentViewsAction (core.js:24731)
 at createViewNodes (core.js:24405)
 at callViewAction (core.js:24825)
 at execComponentViewsAction (core.js:24731)
 at resolvePromise (zone.js:814)
 at resolvePromise (zone.js:771)
 at zone.js:873
 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
 at Object.onInvokeTask (core.js:16954)
 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
 at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
 at drainMicroTaskQueue (zone.js:595)

_elementRef is undefined for some reason.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Setup any type of mat-table and the cdk table constructor doesn't get it's element ref injected.

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

7.0.0 w/ angular 7.0.0 on chrome 70.0.3538.67 (Official Build) (64-bit)

Is there anything else we should know?

Seems to be working on the docs. Wondering if it's just with upgraded apps? Going to check if a new gen app works with table.

[josephperrott]

Are you referencing the _elementRef for a table from your code?

Can you provide a reproduction of the issue you are seeing?

[epelc]

@josephperrott Just found the cause :)

I setup a new project trying to figure this out but a fresh cli project + ng add @angular/material on latest versions with a basic table component shows no errors. I tracked it down though to targeting es6 instead of es5 in the tsconfig.json.

ie { "target": "es6"} causes this bug. Oddly enough I also noticed the polyfills for new projects are only enabled for evergreen browsers but they still target es5 by default for some reason?

[epelc]

@josephperrott Couldn't get a demo to load on stackblitz(not sure if it doesn't support angular v7 yet?) but here is a repo to reproduce this.

https://github.com/epelc/bad-material-table

It has target: "es6" in the tsconfig.json with a basic table to show the bug. Just npm install && npm start and restart with target es5 to show the table working.