Angular Material侧边栏开发报错：'mat-nav-list'不是已知元素求协助

API 探路者

2026-5-20

解决'mat-nav-list'不是已知元素的问题

别着急，我帮你梳理几个Angular Material开发里常见的排查方向，大概率能找到问题所在：

确认导入了正确的模块
mat-nav-list是属于MatListModule的组件，可不是MatSidenavModule哦！你需要在使用这个侧边栏组件的模块（比如侧边栏所在的特性模块，或者根模块AppModule）里正确导入它：
```
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    // ...其他已导入的模块
    MatListModule
  ]
})
export class YourTargetModule { }
```
这里要注意：如果你的侧边栏组件是在子模块里，必须在该子模块的imports数组里添加MatListModule，只在AppModule里导入是没用的（除非你把MatListModule加到AppModule的exports里，再让子模块导入AppModule，但这种方式并不推荐）。
检查模块导入的位置
很多人会犯的小错误：把MatListModule导入到了组件的.ts文件里，而不是模块文件（*.module.ts）里。组件文件里的导入只是让TypeScript识别类型，但Angular需要在模块的imports数组里注册这个模块，才能识别对应的组件标签。
快速验证拼写和格式
虽然你说其他组件正常，但还是花两秒钟确认下模板里的标签是不是mat-nav-list——有没有写成mat-navlist、Mat-Nav-List这类错误格式？Angular的组件标签是严格区分连字符和大小写的。
检查版本兼容性
如果你的Angular核心包和Angular Material版本不匹配，也可能出现这类奇怪的识别问题。可以运行ng version查看版本，确保@angular/core和@angular/material的主版本号一致（比如都是16.x或者17.x）。