{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material2/issues/9813","repository_url":"https://api.github.com/repos/angular/material2","labels_url":"https://api.github.com/repos/angular/material2/issues/9813/labels{/name}","comments_url":"https://api.github.com/repos/angular/material2/issues/9813/comments","events_url":"https://api.github.com/repos/angular/material2/issues/9813/events","html_url":"https://github.com/angular/material2/issues/9813","id":294927978,"node_id":"MDU6SXNzdWUyOTQ5Mjc5Nzg=","number":9813,"title":"MatTable: Cannot read property 'nativeElement' of undefined","user":{"login":"mswilson4040","id":19480392,"node_id":"MDQ6VXNlcjE5NDgwMzky","avatar_url":"https://avatars1.githubusercontent.com/u/19480392?v=4","gravatar_id":"","url":"https://api.github.com/users/mswilson4040","html_url":"https://github.com/mswilson4040","followers_url":"https://api.github.com/users/mswilson4040/followers","following_url":"https://api.github.com/users/mswilson4040/following{/other_user}","gists_url":"https://api.github.com/users/mswilson4040/gists{/gist_id}","starred_url":"https://api.github.com/users/mswilson4040/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mswilson4040/subscriptions","organizations_url":"https://api.github.com/users/mswilson4040/orgs","repos_url":"https://api.github.com/users/mswilson4040/repos","events_url":"https://api.github.com/users/mswilson4040/events{/privacy}","received_events_url":"https://api.github.com/users/mswilson4040/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-02-06T21:59:26Z","updated_at":"2018-10-08T11:04:31Z","closed_at":"2018-02-06T22:10:44Z","author_association":"NONE","body":"#### Bug, feature request, or proposal:\r\nBug\r\n\r\n#### What is the expected behavior?\r\nMatTable to render\r\n\r\n#### What is the current behavior?\r\nMatTable throws error \r\n\r\n```\r\ncore.js:1365 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined\r\nTypeError: Cannot read property 'nativeElement' of undefined\r\n    at new CdkTable (table.js:466)\r\n    at new MatTable (table.js:27)\r\n    at createClass (core.js:10353)\r\n    at createDirectiveInstance (core.js:10200)\r\n    at createViewNodes (core.js:11657)\r\n    at callViewAction (core.js:12091)\r\n    at execComponentViewsAction (core.js:12000)\r\n    at createViewNodes (core.js:11685)\r\n    at createRootView (core.js:11546)\r\n    at callWithDebugContext (core.js:12912)\r\n    at new CdkTable (table.js:466)\r\n    at new MatTable (table.js:27)\r\n    at createClass (core.js:10353)\r\n    at createDirectiveInstance (core.js:10200)\r\n    at createViewNodes (core.js:11657)\r\n    at callViewAction (core.js:12091)\r\n    at execComponentViewsAction (core.js:12000)\r\n    at createViewNodes (core.js:11685)\r\n    at createRootView (core.js:11546)\r\n    at callWithDebugContext (core.js:12912)\r\n    at resolvePromise (zone.js:809)\r\n    at resolvePromise (zone.js:775)\r\n    at eval (zone.js:858)\r\n    at ZoneDelegate.invokeTask (zone.js:421)\r\n    at Object.onInvokeTask (core.js:3979)\r\n    at ZoneDelegate.invokeTask (zone.js:420)\r\n    at Zone.runTask (zone.js:188)\r\n    at drainMicroTaskQueue (zone.js:595)\r\n    at <anonymous>\r\n\r\n```\r\n#### What are the steps to reproduce?\r\nProviding a StackBlitz reproduction is the *best* way to share your issue. <br/>\r\nStackBlitz starter: https://goo.gl/wwnhMV<br/>\r\n\r\n\r\n#### What is the use-case or motivation for changing an existing behavior?\r\nGetting MatTable to work\r\n\r\n#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?\r\nPackage.json\r\n```\r\n{\r\n  \"name\": \"admin-app\",\r\n  \"version\": \"0.0.0\",\r\n  \"license\": \"MIT\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"build-dev\": \"ng build --base-href=/ngx/index/ --deploy-url=~/scripts/ngapp/\",\r\n    \"build-prod\": \"ng build --base-href=/ngx/index/ --deploy-url=~/scripts/ngapp/ --prod --aot --no-progress\",\r\n    \"test\": \"ng test --sourcemaps=false\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular/animations\": \"^5.2.3\",\r\n    \"@angular/cdk\": \"^5.2.0\",\r\n    \"@angular/common\": \"^5.2.3\",\r\n    \"@angular/compiler\": \"^5.2.3\",\r\n    \"@angular/core\": \"^5.2.3\",\r\n    \"@angular/forms\": \"^5.2.3\",\r\n    \"@angular/http\": \"^5.2.3\",\r\n    \"@angular/material\": \"^5.2.0\",\r\n    \"@angular/platform-browser\": \"^5.2.3\",\r\n    \"@angular/platform-browser-dynamic\": \"^5.2.3\",\r\n    \"@angular/router\": \"^5.2.3\",\r\n    \"core-js\": \"^2.4.1\",\r\n    \"font-awesome\": \"^4.7.0\",\r\n    \"hammerjs\": \"^2.0.8\",\r\n    \"instantsearch.js\": \"^2.5.0\",\r\n    \"rxjs\": \"^5.5.2\",\r\n    \"uniqid\": \"^4.1.1\",\r\n    \"zone.js\": \"^0.8.20\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular/cli\": \"^1.6.7\",\r\n    \"@angular/compiler-cli\": \"^5.2.3\",\r\n    \"@angular/language-service\": \"^5.2.3\",\r\n    \"@types/jasmine\": \"~2.5.53\",\r\n    \"@types/jasminewd2\": \"~2.0.2\",\r\n    \"codelyzer\": \"^4.1.0\",\r\n    \"jasmine-core\": \"~2.6.2\",\r\n    \"jasmine-spec-reporter\": \"~4.1.0\",\r\n    \"karma\": \"~1.7.0\",\r\n    \"karma-chrome-launcher\": \"~2.1.1\",\r\n    \"karma-cli\": \"~1.0.1\",\r\n    \"karma-coverage-istanbul-reporter\": \"^1.4.1\",\r\n    \"karma-jasmine\": \"~1.1.0\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"node-sass\": \"^4.7.2\",\r\n    \"protractor\": \"~5.1.2\",\r\n    \"ts-node\": \"~3.2.0\",\r\n    \"tslint\": \"~5.7.0\",\r\n    \"typescript\": \"2.4.2\"\r\n  }\r\n}\r\n\r\n```\r\n\r\n#### Is there anything else we should know?\r\n\r\nIt looks like the issue is when a new CdkTable is created:\r\n\r\n![image](https://user-images.githubusercontent.com/19480392/35886311-7c2cbfee-0b45-11e8-8d17-21df0b1ca0fd.png)\r\n\r\nCode:\r\n\r\nComponent.html\r\n\r\n```\r\n<mat-table [dataSource]=\"dataSource\">\r\n\r\n  <!-- Position Column -->\r\n  <ng-container matColumnDef=\"position\">\r\n    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let element\"> {{element.position}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Name Column -->\r\n  <ng-container matColumnDef=\"name\">\r\n    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Weight Column -->\r\n  <ng-container matColumnDef=\"weight\">\r\n    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let element\"> {{element.weight}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Symbol Column -->\r\n  <ng-container matColumnDef=\"symbol\">\r\n    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let element\"> {{element.symbol}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\r\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\r\n</mat-table>\r\n```\r\n\r\nComponent.ts\r\n\r\n```\r\nimport { AfterViewInit, Component, OnInit } from '@angular/core';\r\nimport { PartnersService } from '../../../shared-services/partners.service';\r\n\r\n\r\n@Component({\r\n  selector: 'app-partners',\r\n  templateUrl: './partners.component.html',\r\n  styleUrls: ['./partners.component.scss'],\r\n  providers: [ PartnersService ]\r\n})\r\nexport class PartnersComponent implements OnInit, AfterViewInit {\r\n  displayedColumns = ['position', 'name', 'weight', 'symbol'];\r\n  dataSource = ELEMENT_DATA;\r\n  constructor() {\r\n\r\n  }\r\n  ngAfterViewInit() {\r\n  }\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n\r\nconst ELEMENT_DATA: any[] = [\r\n  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},\r\n  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},\r\n  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},\r\n  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},\r\n  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},\r\n  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},\r\n  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},\r\n  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},\r\n  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},\r\n  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},\r\n  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},\r\n  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},\r\n  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},\r\n  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},\r\n  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},\r\n  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},\r\n  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},\r\n  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},\r\n  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},\r\n  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},\r\n];\r\n\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/material2/issues/comments/427794270","html_url":"https://github.com/angular/material2/issues/9813#issuecomment-427794270","issue_url":"https://api.github.com/repos/angular/material2/issues/9813","id":427794270,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNzc5NDI3MA==","user":{"login":"shahnawaz-mm","id":12895115,"node_id":"MDQ6VXNlcjEyODk1MTE1","avatar_url":"https://avatars0.githubusercontent.com/u/12895115?v=4","gravatar_id":"","url":"https://api.github.com/users/shahnawaz-mm","html_url":"https://github.com/shahnawaz-mm","followers_url":"https://api.github.com/users/shahnawaz-mm/followers","following_url":"https://api.github.com/users/shahnawaz-mm/following{/other_user}","gists_url":"https://api.github.com/users/shahnawaz-mm/gists{/gist_id}","starred_url":"https://api.github.com/users/shahnawaz-mm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shahnawaz-mm/subscriptions","organizations_url":"https://api.github.com/users/shahnawaz-mm/orgs","repos_url":"https://api.github.com/users/shahnawaz-mm/repos","events_url":"https://api.github.com/users/shahnawaz-mm/events{/privacy}","received_events_url":"https://api.github.com/users/shahnawaz-mm/received_events","type":"User","site_admin":false},"created_at":"2018-10-08T11:04:31Z","updated_at":"2018-10-08T11:04:31Z","author_association":"NONE","body":"@mswilson4040 Sure, here is tsconfig and package.json\r\n\r\n`{\r\n  \"compileOnSave\": false,\r\n  \"compilerOptions\": {\r\n    \"baseUrl\": \"src\",\r\n    \"paths\": {\r\n      \"@app/*\": [\"app/*\"],\r\n      \"@env/*\": [\"environments/*\"],\r\n      \"@assets/*\" : [\"assets/*\"]\r\n    },\r\n    \"outDir\": \"./dist/out-tsc\",\r\n    \"sourceMap\": true,\r\n    \"declaration\": false,\r\n    \"moduleResolution\": \"node\",\r\n    \"emitDecoratorMetadata\": true,\r\n    \"experimentalDecorators\": true,\r\n    \"target\": \"es2015\",\r\n    \"typeRoots\": [\r\n      \"node_modules/@types\"\r\n    ],\r\n    \"lib\": [\r\n      \"es2017\",\r\n      \"dom\"\r\n    ]\r\n  }\r\n}`\r\n\r\n**package.json.**\r\n\r\n`\"@angular/animations\": \"^6.1.6\",\r\n    \"@angular/cdk\": \"^6.4.7\",\r\n    \"@angular/common\": \"^6.0.0\",\r\n    \"@angular/compiler\": \"^6.0.0\",\r\n    \"@angular/core\": \"^6.0.0\",\r\n    \"@angular/forms\": \"^6.0.0\",\r\n    \"@angular/http\": \"^6.0.0\",\r\n    \"@angular/material\": \"^6.4.7\"`\r\n\r\n\r\nI 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\r\n\r\n\r\n"}}
{"actor":{"display_login":"shahnawaz-minhas"}}