升级Angular 6后遇StaticInjectorError：MatRipple缺失ElementRef提供者

我之前也碰到过类似的Angular升级后Material组件出问题的情况，结合你给出的错误信息来看，这个问题主要跟版本兼容性不匹配或者Material模块导入配置错误有关，下面给你几个具体的排查和解决步骤：

• 检查Angular与Material版本兼容性
  Angular 6对应的Angular Material和CDK版本必须是6.x系列，版本不匹配会直接导致依赖注入异常。你可以打开项目根目录的package.json文件，查看@angular/material、@angular/cdk和@angular/core的版本是否保持一致（均为6.x.x）。如果版本不一致，执行以下命令修正：

  npm install @angular/material@6.x.x @angular/cdk@6.x.x --save
  

• 确认Material组件模块的正确导入
  Angular 6之后，Material不再推荐使用全局的MaterialModule，而是需要按需导入对应的组件模块。比如你用到了mat-list-item，必须在你的NgModule的imports数组中添加MatListModule；而MatRipple是很多Material组件的底层依赖，要确保MatRippleModule也被导入（或者包含在你使用的组件模块中）。示例代码如下：

  import { NgModule } from '@angular/core';
  import { MatListModule } from '@angular/material/list';
  import { MatRippleModule } from '@angular/material/core';
  
  @NgModule({
    imports: [
      // 其他业务模块
      MatListModule,
      MatRippleModule
    ]
  })
  export class YourFeatureModule { }
  

• 清理缓存并重新构建项目
  升级过程中可能残留旧的依赖缓存，导致构建时加载错误的代码。你可以按以下步骤操作：

  1. 删除项目根目录下的node_modules文件夹
  2. 清除npm本地缓存：

     npm cache clean --force
     

  3. 重新安装所有依赖：

     npm install
     

  4. 重新启动开发服务器或构建项目：

     ng serve
     

• 排查自定义组件的ElementRef注入
  如果你的自定义组件中手动注入了ElementRef，要确保是在组件的构造函数中正确注入，且组件被正确声明在NgModule的declarations数组中，不要错误地将组件作为服务在providers中声明。不过从你的错误栈来看，这个可能性较低，优先排查前面三个步骤。

内容的提问来源于stack exchange，提问作者D. Azeez