同模块内Angular组件引用报错：'nutricow-categories'不是已知元素

• 将CategoriesComponent添加到NutricowModule的exports数组
  同模块内的组件要在其他组件模板中使用，仅在declarations数组声明还不够，必须导出。修改NutricowModule代码：

  @NgModule({
    declarations: [LandingPageComponent, CategoriesComponent],
    exports: [CategoriesComponent] // 新增此行，将组件暴露给模块内其他组件使用
  })
  export class NutricowModule { }
  

• 核对组件选择器拼写
  检查CategoriesComponent的@Component装饰器中selector的值，确保和模板里的nutricow-categories完全一致，注意大小写、连字符不能出错：

  @Component({
    selector: 'nutricow-categories', // 必须与模板中的标签完全匹配
    templateUrl: './categories.component.html'
  })
  export class CategoriesComponent { }
  

• 确认懒加载路由配置正确
  检查根路由文件（如app-routing.module.ts）中的懒加载路径，确保指向正确的NutricowModule：

  const routes: Routes = [
    {
      path: 'nutricow',
      loadChildren: () => import('./nutricow/nutricow.module').then(m => m.NutricowModule)
    }
  ];
  

• 清理缓存并重启服务
  执行ng clean清除Angular缓存，再重新启动服务ng serve -o，缓存问题常导致这类组件识别异常。

• 避免模块重复导入
  确保NutricowModule没有被错误导入到AppModule或其他模块的imports数组中，懒加载模块仅需通过路由加载，无需在其他模块手动导入。

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