Angular组件导入异常：'app-side-bar'未被识别

1. 确认HomeItensComponent已在HomeItensModule中声明 #

你提供的HomeItensModule代码里，declarations数组是空的。如果HomeItensComponent属于这个模块，必须将其添加到declarations中，否则模块无法识别该组件，也就无法解析组件模板里的app-side-bar：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideBarModule } from './../side-bar/side-bar.module';
import { HomeItensRoutingModule } from './home-itens-routing.module';
// 导入HomeItensComponent
import { HomeItensComponent } from './home-itens.component';

@NgModule({
  declarations: [
    HomeItensComponent // 添加到声明数组
  ],
  imports: [
    CommonModule,
    HomeItensRoutingModule,
    SideBarModule
  ],
})
export class HomeItensModule { }

2. 验证SideBarComponent的selector是否为app-side-bar #

打开side-bar.component.ts，检查@Component装饰器里的selector属性是否确实是app-side-bar：

@Component({
  selector: 'app-side-bar', // 确保这里和模板里使用的选择器一致
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent { ... }

如果selector是其他值（比如side-bar），模板里就要对应改成<side-bar></side-bar>。

3. 检查SideBarModule的导入路径是否正确 #

确认import { SideBarModule } from './../side-bar/side-bar.module';的路径是否匹配你的项目文件夹结构：

• 若home-itens和side-bar文件夹在同一级目录下，该路径正确；
• 若层级不符，需要调整路径（比如./../../side-bar/side-bar.module）。

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