使用CoreUI模板添加Angular自定义组件时报Unknown element如何解决？

排查与解决步骤 #

• 检查组件selector配置
  打开suggestion-card.component.ts文件，确认@Component装饰器中的selector属性值为app-suggestion-card，注意拼写、大小写完全匹配，Angular模板中的组件选择器大小写敏感。
• 核对组件调用方的所属模块
  CoreUI Admin Dashboard默认采用懒加载模块化架构，如果你在子特性模块（如DashboardModule、用户管理模块等）的模板中调用该组件，仅在AppModule中声明是无效的，子模块无法直接访问根模块声明的组件。可根据使用场景选择对应方案：
  • 若为公共通用组件：将SuggestionCardComponent同时加入公共共享模块（一般为SharedModule）的declarations和exports数组中，再在需要调用组件的子模块的imports数组中引入该共享模块
  • 若仅在单个子模块内使用：直接将SuggestionCardComponent从AppModule的declarations中移除，加到对应子模块的declarations数组即可
• 检查模块导出配置
  如果组件已经放在某个特性模块中，必须同时将组件加入该模块的exports数组，其他导入该模块的场景才能正常调用组件。
• 清除编译缓存重试
  Angular增量编译缓存异常也会触发该类误报错，先停止本地开发服务，删除项目根目录下的.angular缓存文件夹，再重新执行ng serve启动服务验证。
• 核对组件导入路径
  检查AppModule中import { SuggestionCardComponent } from 'xxx'的路径拼写，尤其注意文件夹、文件名的大小写，大小写不匹配在Windows环境下不会触发导入报错，但会导致组件声明无效。

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