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
- fix(table): not rendering properly in es2015 apps 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... — committed to devversion/material2 by devversion 6 years ago
- fix: ensure components work with ES2015 in jit mode. 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 ha... — committed to devversion/material2 by devversion 6 years ago
- fix: ensure components work with ES2015 in jit mode. (#12759) Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue... — committed to angular/components by devversion 6 years ago
- fix: ensure components work with ES2015 in jit mode. (#12759) Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue... — committed to angular/components by devversion 6 years ago
Same issue
This should have a higher priority…
Looks like this is an issue in the Angular compiler. The
MatTable
extendsCdkTable
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
also relate to https://github.com/angular/material2/issues/9813