Angular 17中'courses'组件报NG8001错误求排查

针对你遇到的问题，按以下步骤逐一排查：

• 检查组件文件与类名匹配度
  确认courses.component.ts里的组件类名是CoursesComponent，文件名和类名拼写完全一致（Angular约定文件名用kebab-case，类名用PascalCase，比如courses.component.ts对应CoursesComponent）。

• 验证app.module.ts的导入路径
  确保导入组件的路径正确，比如：

  import { CoursesComponent } from './courses/courses.component';
  

  若组件放在子目录，路径要对应（如./components/courses/courses.component），路径错误会导致Angular运行时无法识别组件，编辑器可能因自动补全未报错。

• 确认declarations数组已添加组件
  在app.module.ts的@NgModule装饰器中，检查declarations数组是否包含CoursesComponent：

  @NgModule({
    declarations: [
      AppComponent,
      CoursesComponent // 必须存在此行
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  

  漏加这一行是此类错误最常见的原因。

• 核对组件selector与模板使用是否一致
  打开courses.component.ts，确认@Component的selector字段是'courses'，同时在使用该组件的模板（如app.component.html）里，要写<courses></courses>，selector的大小写、符号必须完全匹配（比如selector是app-courses的话，模板里不能写<courses>）。

• 重启ng serve进程
  Angular的热重载偶尔会出现模块变更未同步的情况，尤其是在Angular 17非独立模式下，关闭当前ng serve进程，重新执行ng serve试试。

• 排查手动创建组件的配置问题
  若组件是手动创建而非用ng generate component courses生成，检查angular.json里的projects -> 你的项目名 -> architect -> build -> options -> files或include字段，确认组件文件被包含在编译范围内。

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