Angular Material安装报错：TS2315: ElementRef类型非泛型

这个报错我之前帮不少开发者排查过，核心原因就是你的Angular版本和Angular Material版本不兼容：

你的环境是Angular CLI 1.7.4，对应底层Angular核心版本是5.x。而Angular从6.x版本开始，把ElementRef改成了泛型类型（比如ElementRef<HTMLElement>），但Angular 5.x里的ElementRef还是非泛型的。如果安装了v6及以上的Angular Material，它的类型定义会使用泛型ElementRef，和你本地的Angular 5.x类型冲突，就会抛出TS2315: Type 'ElementRef' is not generic错误。

下面给你两种可行的解决方案，按需选择：

方案1：保留Angular 5.x环境，安装匹配的Material版本 #

直接安装Angular 5.x对应的Material稳定版本（v5.2.5），完全适配你的现有环境：

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

注意：Angular Material依赖Angular CDK，所以要同步安装同版本的CDK，避免额外的依赖冲突。

安装完成后，在你的模块文件（比如app.module.ts）中导入需要的Material模块即可，以按钮切换组件为例：

import { MatButtonToggleModule } from '@angular/material/button-toggle';

@NgModule({
  imports: [
    // 其他模块...
    MatButtonToggleModule
  ]
})
export class AppModule { }

方案2：升级Angular到6+，使用最新Material版本 #

如果你的项目允许升级，可以先把Angular环境升级到6.x（和你的Node 9.11.1兼容），再安装最新的Material：

1. 全局卸载旧版Angular CLI：

npm uninstall -g @angular/cli

2. 安装6.x版本的CLI（选稳定的6.2.9版本）：

npm install -g @angular/cli@6.2.9

3. 升级项目内的Angular核心依赖：

ng update @angular/core @angular/cli

升级过程中如果出现依赖冲突，可以尝试删除node_modules和package-lock.json，然后重新执行npm install。

4. 安装最新兼容的Angular Material和CDK：

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

两种方案都能解决你遇到的类型错误，根据你的项目需求选择就好。

内容的提问来源于stack exchange，提问作者Nilson Nieto