Angular 5创建Material Table报错：elementRef is undefined

你遇到的这个问题在Angular 5搭配Material的场景里挺常见的，哪怕是空表都触发错误，大概率是模块配置或者版本兼容层面的问题，我给你几个排查方向和具体解决方案：

1. 确保Angular Material版本与Angular 5严格兼容 #

Angular和Material的版本必须一一对应，Angular 5只能搭配**@angular/material@5.x**系列版本。如果你的package.json里Material版本过高（比如6+），就会出现这类诡异的未定义错误。你可以运行以下命令重新安装适配的稳定版本：

npm install @angular/material@5.2.5 @angular/cdk@5.2.5 --save

2. 必须导入BrowserAnimationsModule #

Angular Material的绝大多数组件依赖动画模块，缺少它会导致组件初始化失败，进而抛出类似elementRef is undefined的错误。你需要在MyComponentModule或者根模块中添加这个导入：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    CommonModule,
    CdkTableModule,
    MatTableModule,
    MatCardModule,
    MatInputModule,
    MatButtonModule,
    FormsModule,
    BrowserAnimationsModule // 新增这行
  ],
  declarations: [ MyComponent ]
})
export class MyComponentModule { }

如果因特殊原因无法启用动画，也可以用NoopAnimationsModule替代，但优先推荐前者。

3. 调整模块导入顺序（次要但有效） #

虽然Angular模块导入顺序大多时候不影响，但Material与CDK模块搭配时，建议先导入CdkTableModule再导入MatTableModule，避免潜在的加载冲突：

imports: [
  CommonModule,
  CdkTableModule, // 先加载CDK基础模块
  MatTableModule, // 再加载Material封装的Table模块
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  FormsModule,
  BrowserAnimationsModule
]

4. 快速检查组件类的引用正确性 #

哪怕你说代码和官方教程一致，也可以快速确认下组件类里的@ViewChild引用是否正确：

import { MatTable } from '@angular/material/table';

@ViewChild(MatTable) table: MatTable<any>;

避免出现误引用其他组件类型，或者在ngOnInit里过早访问未初始化的table实例的情况。

按照上面的步骤排查后，应该就能解决这个错误了。

内容的提问来源于stack exchange，提问作者Benjamin Lucidarme