Angular共享模块组件导入报错：'app-toolbar'未被识别

针对你遇到的app-toolbar未知元素错误，按以下步骤排查解决：

1. 检查ToolbarComponent的选择器 #

打开toolbar.component.ts，确认@Component装饰器中的selector字段是否为app-toolbar，注意拼写、大小写和符号完全匹配，示例：

@Component({
  selector: 'app-toolbar', // 必须和模板中使用的选择器完全一致
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent { }

2. 验证SharedModule的导出配置 #

确认shared.module.ts的exports数组中确实包含ToolbarComponent，且组件名称拼写无误：

exports: [
  NgbModule,
  MaterialModule,
  ToolbarComponent // 确保此处无拼写错误
]

3. 检查HomePageModule的SharedModule导入路径 #

确认home-page.module.ts中导入SharedModule的路径是否正确，根据你的目录结构，../shared/shared.module需指向正确的文件，若目录层级调整，路径需对应修改。

4. 清理Angular缓存并重新编译 #

执行以下命令清理缓存后重启项目：

ng clean
ng serve

5. 确认组件未重复声明 #

确保ToolbarComponent仅在SharedModule的declarations数组中声明，未在其他模块（如HomePageModule或AppModule）重复声明——Angular要求一个组件只能归属一个模块。

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