NG0303: 已导入CommonModule仍无法绑定'ngIf'问题求助

错误原因 #

出现NG0303: Can't bind to 'ngIf' since it isn't a known property of 'span'错误的核心原因是：CompB01Component的编译上下文没有获取到CommonModule导出的ngIf指令，结合你给出的代码，具体触发场景是以下两种之一：

• 你在AppModule/AppRoutingModule中直接使用了CompB01Component（要么在模板里写了组件选择器，要么在路由里直接指定component为CompB01Component），但没有将ModulebModule导入到对应的模块中
• 你配置了ModulebModule的懒加载，但路由规则写法错误，没有正确关联到ModulebModule的子路由配置

解决方案 #

根据你的使用场景二选一即可：

场景1：同步使用ModulebModule下的组件

直接修改AppModule的imports配置，添加ModulebModule即可，同时可删除冗余的CommonModule导入（BrowserModule已默认导出CommonModule，不需要重复引入）：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModulebModule // 新增导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

场景2：路由跳转使用ModulebModule下的组件

• 非懒加载方案：在AppRoutingModule的imports数组中添加ModulebModule即可
• 懒加载方案：修改AppRoutingModule的路由配置，不要直接指定component为CompB01Component，改为通过loadChildren加载ModulebModule，同时在ModulebModule内部配置子路由指向对应组件：

// AppRoutingModule路由配置示例
const routes: Routes = [
  {
    path: 'module-b',
    loadChildren: () => import('./path-to-moduleb/moduleb.module').then(m => m.ModulebModule)
  }
]

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