求助：Angular Material控件提示‘is not a known element’问题排查

已完成操作 #

• 安装Angular Material
  
• 创建Material模块
  
• 将Material模块导入至App模块
  

问题描述 #

在任意模板中插入Angular Material控件时，始终出现'xxx is not a known element'错误，例如使用date picker时的报错：

可能的解决思路 #

1. 检查Material模块的导出配置
   确保自定义的Material模块不仅导入了所需的Angular Material组件模块，还将它们导出。比如使用date picker需要导入MatDatepickerModule、MatNativeDateModule、MatInputModule，并在模块的exports数组中声明这些模块，让其他模块能访问到组件。
   示例代码：

   import { NgModule } from '@angular/core';
   import { MatDatepickerModule } from '@angular/material/datepicker';
   import { MatNativeDateModule } from '@angular/material/core';
   import { MatInputModule } from '@angular/material/input';
   
   @NgModule({
     imports: [MatDatepickerModule, MatNativeDateModule, MatInputModule],
     exports: [MatDatepickerModule, MatNativeDateModule, MatInputModule]
   })
   export class MaterialModule { }
   

2. 确认功能模块的导入情况
   如果使用控件的组件属于App模块之外的功能模块，需要在该功能模块中也导入自定义的Material模块，不能只在App模块中导入。

3. 验证版本兼容性
   检查Angular Material版本与项目Angular版本是否匹配，版本不兼容会导致组件无法被正确识别。可通过ng version查看版本，对照官方兼容性表确认匹配关系。

4. 清理缓存并重启服务
   执行ng clean清理项目缓存，再重启ng serve，缓存可能导致模块变更无法被正确加载。

5. 核对组件选择器拼写
   确认模板中使用的组件选择器拼写正确，比如date picker的正确写法是<input matInput [matDatepicker]="picker">、<mat-datepicker #picker></mat-datepicker>，拼写错误会直接触发“not a known element”错误。

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