Angular出现'app-sidenav-list' is not a known element报错如何解决

问题场景 #

开发sidenav侧边导航功能时，模板中使用<app-sidenav-list></app-sidenav-list>标签触发编译报错，错误提示：

'app-sidenav-list' is not a known element:

1. If 'app-sidenav-list' is an Angular component, then verify that it is part of this module.
2. If 'app-sidenav-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

相关参考截图：

• 错误详情：
• 模块配置（app.module.ts）：

排查解决步骤 #

按以下顺序逐一验证，绝大多数该类报错都能在前3步解决：

• 检查组件声明配置
  找到selector为app-sidenav-list对应的组件类（一般命名为SidenavListComponent），确认它已经被加入到当前组件所属模块的declarations数组中。自定义组件未在模块声明是该报错的头号诱因。
  正确配置示例：

  // 先按实际路径正确引入组件
  import { SidenavListComponent } from './layout/sidenav/sidenav-list.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      // 其他已声明组件...
      SidenavListComponent // 必须加入声明列表
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSidenavModule
      // 其他依赖模块...
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查跨模块使用的导出配置
  如果SidenavListComponent没有声明在AppModule，而是声明在独立的特性模块（比如LayoutModule、NavigationModule）中，需要做两个配置：
  1. 在特性模块的declarations数组中声明SidenavListComponent
  2. 在特性模块的exports数组中添加SidenavListComponent，再把该特性模块加入到使用组件的模块的imports数组中，否则跨模块的组件无法被模板识别。
• 检查命名拼写一致性
  核对组件@Component装饰器中配置的selector值是否确实为app-sidenav-list，同时检查HTML模板中写的标签名和selector完全匹配，注意连字符、大小写不要出错，比如把sidenav拼错、漏写中间的连字符都会触发该报错。
• 特殊场景配置
  只有确认app-sidenav-list是非Angular生态的原生Web Component时，才在对应模块的schemas配置中添加CUSTOM_ELEMENTS_SCHEMA屏蔽报错，不要在未排查前面配置问题的情况下随意添加该配置，否则会掩盖真实的组件注册错误。
  配置示例：

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  @NgModule({
    // declarations、imports等其他配置不变
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule { }
  

• 缓存问题处理
  以上配置全部确认无误后，终止本地开发服务，重新运行ng serve启动项目，IDE偶尔会出现文件监听失效、索引缓存未更新的问题，重启服务即可识别最新配置。

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