Angular 13中使用Angular Material时'mat-slider'未被识别的问题排查

仔细看了你的AppModule配置和package.json依赖，你已经正确导入了MatSliderModule，也添加了Material组件必需的BrowserAnimationsModule，Angular和Material的版本也完全兼容（Angular 13.1.0对应Material 13.1.1），那出现'mat-slider' is not a known element这个错误，大概率是构建缓存或者小的配置细节问题，你可以按下面的步骤排查：

• 清理Angular构建缓存：这是解决这类模块识别问题最常见的办法，Angular的开发服务器有时候会缓存旧的模块配置，导致新导入的模块不生效。执行以下命令：

  ng clean
  ng serve
  

  先清理缓存，再重启开发服务器，很多时候问题就能解决。

• 二次确认模块导入细节：虽然你的代码看起来没问题，但再检查一遍以防万一：

  1. 确保MatSliderModule的导入语句拼写正确：import { MatSliderModule } from '@angular/material/slider';
  2. 确认MatSliderModule确实被添加到了@NgModule的imports数组中（你的代码里已经加了，这一步主要是避免拼写错误或者不小心遗漏）。

• 极端情况：重置依赖：如果上面的步骤都没用，可能是依赖安装出现了异常，试试删除node_modules和锁文件，重新安装依赖：

  # 如果你用npm
  rm -rf node_modules package-lock.json
  npm install
  
  # 如果你用yarn
  rm -rf node_modules yarn.lock
  yarn install
  

  安装完成后再重启开发服务器ng serve。

另外要注意，如果你之后在懒加载模块中使用Material组件，一定要在对应的模块中也导入所需的Material模块，不能只在根模块导入。不过你现在是在AppComponent中使用，这部分没问题。

内容的提问来源于stack exchange，提问作者marcellus denta