Ubuntu16.4.5中安装Angular5的Angular Material遇ElementRef非泛型错误求助

这个问题我之前帮同事排查过，本质是Angular Material版本与Angular 5核心版本不匹配，再加上你混装了不同渠道的Material包，导致类型定义冲突。下面是一步步的解决方案：

问题根源 #

你执行的命令里同时安装了正式版的@angular/material和开发构建版的angular/material2-builds，这两个包版本不一致；而且高版本的Angular Material（比如v6+）中ElementRef是泛型类型，但Angular 5的ElementRef是非泛型的，类型定义不兼容就抛出了TS2315: Type 'ElementRef' is not generic错误。

具体解决步骤 #

1. 卸载所有冲突依赖 #

先把已安装的相关包全部卸载，避免残留冲突：

npm uninstall @angular/material @angular/cdk angular/material2-builds angular/cdk-builds @angular/animations

2. 安装与Angular 5匹配的指定版本 #

Angular 5对应的Angular Material稳定版本是5.x系列，建议安装5.2.5（这是v5分支的最后一个稳定版），同时确保@angular/animations版本与你的Angular核心版本一致：

# 假设你的Angular核心版本是5.2.x，执行以下命令
npm install --save @angular/material@5.2.5 @angular/cdk@5.2.5 @angular/animations@5.2.11

3. 验证版本一致性 #

打开项目根目录的package.json，检查以下依赖的主版本是否都是5.x，确保没有版本错位：

"dependencies": {
  // ...其他依赖
  "@angular/core": "~5.2.0",
  "@angular/material": "^5.2.5",
  "@angular/cdk": "^5.2.5",
  "@angular/animations": "^5.2.11"
}

4. 清除缓存并重新构建 #

最后清理npm缓存和node_modules，重新安装依赖后启动项目：

rm -rf node_modules
npm cache clean --force
npm install
ng serve --open

这样应该就能解决类型错误，顺利运行项目了。

内容的提问来源于stack exchange，提问作者Abhinav Sharma