Angular 14子组件Grid未渲染及console无输出问题求助

以下是针对SharedModule共享GridComponent后在Home组件中不显示问题的逐一排查步骤：

1. 确认SharedModule的配置是否正确 #

SharedModule必须同时声明并导出GridComponent，其他模块才能访问到这个组件：

@NgModule({
  declarations: [GridComponent], // 声明组件
  exports: [GridComponent]       // 导出组件，这是核心步骤，缺一不可
})
export class SharedModule { }

2. 检查Home所在模块是否导入了SharedModule #

如果Home组件属于单独的HomeModule，必须在该模块的imports数组中加入SharedModule，仅在AppModule中导入是不够的：

@NgModule({
  imports: [CommonModule, SharedModule], // 导入SharedModule
  declarations: [HomeComponent]
})
export class HomeModule { }

3. 验证GridComponent本身的正确性 #

• 确认组件的selector属性值为app-grid，与Home模板中使用的<app-grid>标签完全匹配
• 检查templateUrl/template路径是否正确，确保指向了存在的组件模板文件
• 组件类必须使用export关键字暴露，否则无法被其他模块引用：

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent { // 必须export
  constructor() {
    console.log('Grid组件已初始化');
  }
}

4. 检查Home组件模板的使用 #

• 确认<app-grid>标签拼写无误，没有多余的空格或大小写错误（HTML中标签名不区分大小写，但selector定义为app-grid的话，必须用短横线格式）
• 排查是否有*ngIf、[hidden]等指令意外隐藏了组件

5. 清理缓存重启服务 #

执行以下命令清理缓存并重启开发服务器，避免缓存导致的组件未更新问题：

ng serve --clear-cache

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