添加CUSTOM_ELEMENTS_SCHEMA后仍提示'app-header'未知且组件内容不显示

核心问题分析 #

你添加CUSTOM_ELEMENTS_SCHEMA反而会干扰Angular对自有组件的处理——这个schema是用来忽略非Angular自定义元素的，对于Angular自己开发的组件，完全不需要配置它。这也是为什么组件标签能被浏览器识别，但内部内容不渲染的核心原因。

分步解决步骤 #

• 确认组件在当前模块的声明列表
  打开当前模块的.ts文件，检查declarations数组里是否包含HeaderComponent，确保没有遗漏：

  @NgModule({
    declarations: [
      // 必须包含HeaderComponent
      HeaderComponent
    ],
    // 移除schemas里的CUSTOM_ELEMENTS_SCHEMA
    // schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class YourCurrentModule { }
  

• 校验组件选择器的拼写
  打开header.component.ts，确认@Component的selector属性值是app-header，和模板中使用的标签完全一致，避免大小写或拼写错误：

  @Component({
    selector: 'app-header', // 必须与模板中的<app-header>完全匹配
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent { }
  

• 移除CUSTOM_ELEMENTS_SCHEMA配置
  直接删除模块中schemas数组的配置，或者移除其中的CUSTOM_ELEMENTS_SCHEMA项。Angular会自动处理自有组件的编译与渲染，不需要这个schema来跳过检查。

• 清理缓存并重启服务
  执行命令清理Angular缓存，然后重启开发服务，确保修改生效：

  ng cache clean
  ng serve
  

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