Components: MatTable: Cannot read property 'nativeElement' of undefined

[mswilson4040]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

MatTable to render

What is the current behavior?

MatTable throws error

core.js:1365 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (table.js:466)
    at new MatTable (table.js:27)
    at createClass (core.js:10353)
    at createDirectiveInstance (core.js:10200)
    at createViewNodes (core.js:11657)
    at callViewAction (core.js:12091)
    at execComponentViewsAction (core.js:12000)
    at createViewNodes (core.js:11685)
    at createRootView (core.js:11546)
    at callWithDebugContext (core.js:12912)
    at new CdkTable (table.js:466)
    at new MatTable (table.js:27)
    at createClass (core.js:10353)
    at createDirectiveInstance (core.js:10200)
    at createViewNodes (core.js:11657)
    at callViewAction (core.js:12091)
    at execComponentViewsAction (core.js:12000)
    at createViewNodes (core.js:11685)
    at createRootView (core.js:11546)
    at callWithDebugContext (core.js:12912)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3979)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

What are the steps to reproduce?

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

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

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

Getting MatTable to work

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

Package.json

{
  "name": "admin-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-dev": "ng build --base-href=/ngx/index/ --deploy-url=~/scripts/ngapp/",
    "build-prod": "ng build --base-href=/ngx/index/ --deploy-url=~/scripts/ngapp/ --prod --aot --no-progress",
    "test": "ng test --sourcemaps=false",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.3",
    "@angular/cdk": "^5.2.0",
    "@angular/common": "^5.2.3",
    "@angular/compiler": "^5.2.3",
    "@angular/core": "^5.2.3",
    "@angular/forms": "^5.2.3",
    "@angular/http": "^5.2.3",
    "@angular/material": "^5.2.0",
    "@angular/platform-browser": "^5.2.3",
    "@angular/platform-browser-dynamic": "^5.2.3",
    "@angular/router": "^5.2.3",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "instantsearch.js": "^2.5.0",
    "rxjs": "^5.5.2",
    "uniqid": "^4.1.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.7",
    "@angular/compiler-cli": "^5.2.3",
    "@angular/language-service": "^5.2.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.7.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.4.2"
  }
}

Is there anything else we should know?

It looks like the issue is when a new CdkTable is created:

Code:

Component.html

<mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Component.ts

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { PartnersService } from '../../../shared-services/partners.service';


@Component({
  selector: 'app-partners',
  templateUrl: './partners.component.html',
  styleUrls: ['./partners.component.scss'],
  providers: [ PartnersService ]
})
export class PartnersComponent implements OnInit, AfterViewInit {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
  constructor() {

  }
  ngAfterViewInit() {
  }
  ngOnInit() {
  }

}

const ELEMENT_DATA: any[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

[mswilson4040]

Well, nevermind. I found the issue. Somehow, my target property in tsconfig.json had the value of 'es2016'. Changing it to 'es5' fixed the issue

Causes error:

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2016",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Doesn't cause error:

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

[mswilson4040]

Unit tests were also failing with the same error. In this case, the tsconfig.app didn't have a target property at all. Once adding `"target": "ess5" to tsconfig.app, unit tests were passing.

[jtbrower]

Thank you! I was experimenting late last night and when I logged in this morning I was haunted by this error. You pointed me directly toward one of the changes I made which caused the issue.

[jpremkumar]

I also face this issue by changing the target to es5 fix the issue. But I've some dependency on es6, that code is breaking now.

Is there any workaround to make it work with target: es6?

[Teamop]

@jpremkumar You can check this https://github.com/angular/material2/issues/8284#issuecomment-354274079

[GerbenRampaart]

@mswilson4040 I gave you all of the smileys. All of them.

[shahnawaz-minhas]

Still have a same error, my angular and materials packages details are following:

"@angular/animations": "^6.1.6", "@angular/cdk": "^6.4.7", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/material": "^6.4.7"

the target value is "target": "es5" in both tsconfig.json and tsconfig.app.json.

Please guide me.

Thanks

[shahnawaz-minhas]

Still have the same error, my angular and materials packages details are following:

It works if you start your app with ng serve --aot instead of ng serve --o

[mswilson4040]

@shahnawaz-mm Can you show us your tsconfig.json?

[shahnawaz-minhas]

@mswilson4040 Sure, here is tsconfig and package.json

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "src", "paths": { "@app/*": ["app/*"], "@env/*": ["environments/*"], "@assets/*" : ["assets/*"] }, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }

package.json.

"@angular/animations": "^6.1.6", "@angular/cdk": "^6.4.7", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/material": "^6.4.7"

I tried a number of solutions suggested over StackOverflow, but couldn't find any solution. But it works if I run command ng serve --aot. But it doesn't work with command ng serve -o

[edvinv]

Just upgraded to version 7 and this problem still remains. Components with MatTable are not rendered and console logs:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (vendor.js:19618)
    at new MatTable (vendor.js:123982)
    at createClass (vendor.js:78621)
    at createDirectiveInstance (vendor.js:78448)
    at createViewNodes (vendor.js:79996)
    at createEmbeddedView (vendor.js:79855)
    at callWithDebugContext (vendor.js:81358)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (vendor.js:80636)
    at TemplateRef_.createEmbeddedView (vendor.js:77953)
    at ViewContainerRef_.createEmbeddedView (vendor.js:77734)

If I serve with ng serve --aot everything works ok.

[arshitabinda]

@edvinv @shahnawaz-minhas
Its working fine with --aot or by changing target to es5, but in my project i can't use any of the above alternative. Can anyone please guide how to fix it.
I have upgraded to angular v7 but still same issue.

[MendyBerger]

For a workaround you can use cdk-table instead (you can then use all the material properties like mat-header-cell and mat-cell), but you will loose some styling.

[alexey-kozlenkov]

Is it intended to be fixed in the future? Seems like there is still no way to transpile code into es6 together with MatTable?

[IonelLupu]

Why is this issue closed? it was not fixed. Some of us cannot use the --aot flag, unfortunately. Is there another solution to this or at least a workaround?

[tommagnusson]

I ran into an issue where my tests were targeting es6 instead of es5 like the rest of my project. For folks wondering why the table renders fine in the project, but throws the nativeElement error while testing , take a look at tsconfig.spec.json:

"compilerOptions": {
    ...
    "target": "es6" // Change to "es5"
    ...
}

[IonelLupu]

@tommagnusson this workaround is not very helpful. I have a requirement to have the target to es6. For now i just used ng serve --aot to fix this. Hope de authors will fix this so it will work for jit too

[tommagnusson]

@JCWolf my project is targeting es5, and my intention was for my tests to do so, but for some reason the testing config mismatched and I want people who are looking for this error within a test but not the project to find my solution (like how I found this thread).

I hope the authors fix the underlying problem with the table as well!

[IanDesouza]

Just upgraded to version 7 and this problem still remains. Components with MatTable are not rendered and console logs:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (vendor.js:19618)
    at new MatTable (vendor.js:123982)
    at createClass (vendor.js:78621)
    at createDirectiveInstance (vendor.js:78448)
    at createViewNodes (vendor.js:79996)
    at createEmbeddedView (vendor.js:79855)
    at callWithDebugContext (vendor.js:81358)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (vendor.js:80636)
    at TemplateRef_.createEmbeddedView (vendor.js:77953)
    at ViewContainerRef_.createEmbeddedView (vendor.js:77734)

If I serve with ng serve --aot everything works ok.

Great catch. Thanks!!

Looking at the code, it seems like without --aot, the nativeElement is undefined at that location.
Someone should at least put in a check for it not being undefined, before trying to set its property.

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