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

[wiedikerli]

This should have a higher priority...

[lacolaco]

also relate to #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 :(