Angular 5 报错：Can't bind to 'ngIf' 问题求助

兄弟，我太懂你一整天卡在这里的崩溃感了！针对你遇到的模块导入问题，结合你给出的模块结构，我梳理了几个大概率能解决问题的排查点：

• 检查SharedModule的exports配置
  这是最容易踩的坑！SharedModule里的homeCard组件/指令，仅仅声明在declarations数组里是不够的，必须把它加到exports数组中，这样其他导入SharedModule的模块（比如你的HomeModule）才能正常使用它。示例代码如下：

  @NgModule({
    declarations: [HomeCardComponent], // 声明组件/指令
    imports: [CommonModule], // 记得导入CommonModule，不然模板里的基础指令用不了
    exports: [HomeCardComponent] // 关键：导出给其他模块复用
  })
  export class SharedModule { }
  

• 禁止在HomeModule重复声明组件
  一定要记住：Angular里每个组件/指令只能在一个模块中声明。别在HomeModule里再声明homeCard组件，否则会直接抛出错误，正确做法是通过导入SharedModule来复用它。

• 核对路由配置的模块加载逻辑
  你提到HomeComponent配置在app-routing.module.ts里：

  • 如果是用loadChildren懒加载HomeModule，要确认懒加载的路径完全正确，并且HomeModule确实已经导入了SharedModule；
  • 如果是直接在AppModule中声明HomeComponent，那AppModule也需要确保SharedModule已经被导入（虽然你说已经做了，但不妨再核对一遍）。

• 清理缓存重启开发服务
  Angular的缓存有时候会搞出莫名其妙的问题，试试执行以下命令重启服务：

  ng serve --delete-output-path
  

  或者手动删除项目根目录下的dist文件夹，再重启服务，说不定就能解决那些“明明配置对了却不生效”的诡异问题。

• 检查组件/指令的选择器拼写
  最后再确认下：你在模板中使用homeCard时的选择器，和组件/指令类里定义的selector属性完全一致吗？比如组件里写的是app-home-card，模板里就不能写成home-card，拼写错误也会导致组件无法正常渲染。

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