Angular14+Ionic6遇NG0303错误：无法绑定*ngIf指令求助

错误信息 #

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'ion-list' (used in the 'SelectContactComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is a part of an @NgModule where this component is declared.

模板中有两个*ngIf指令，因此该错误会触发两次。

当前已执行的操作 #

• 在AddHelperPageModule中导入了CommonModule
• 在该模块的declarations和exports数组中声明了SelectContactComponent
• SelectContactComponent无独立模块文件，通过父组件以模态框形式打开

可能的原因及解决方案 #

1. 错误将组件加入providers数组 #

查看你的AddHelperPageModule代码，你把SelectContactComponent添加到了providers数组中：

providers: [SelectContactComponent]

组件不能放在providers数组内，这个数组是用来注册服务的，把组件放在这里会导致Angular错误地将其作为服务实例化，而非组件，进而无法正确解析模板中的Angular指令（如*ngIf）。

解决方法：移除providers数组中的SelectContactComponent，修改后的模块代码如下：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule,
    Ng2SearchPipeModule
  ],
  declarations: [AddHelperPage, SelectContactComponent],
  exports: [AddHelperPage, SelectContactComponent]
  // 移除providers数组中的SelectContactComponent
})
export class AddHelperPageModule {}

2. 构建缓存未清理 #

Angular或Ionic的构建缓存可能导致旧的模块配置未更新，即使你已经修改了代码。

解决方法：

• 清理Angular缓存：执行ng clean
• 清理Ionic缓存：执行ionic cache clear
• 删除node_modules和package-lock.json文件，重新执行npm install
• 重新构建项目：执行ng build或ionic build

3. 组件被重复声明 #

如果SelectContactComponent在其他模块（比如AppModule）中也被声明了，会导致Angular无法正确关联到包含CommonModule的AddHelperPageModule。

解决方法：检查所有模块的declarations数组，确保SelectContactComponent只在AddHelperPageModule中声明一次。

4. 模块导入路径错误 #

确认CommonModule的导入路径没有拼写错误：

import { CommonModule } from '@angular/common';

如果路径错误，Angular无法正确加载包含*ngIf指令的模块。

验证步骤 #

修改完成后重启开发服务器，打开模态框查看错误是否消失。如果仍有问题，检查浏览器控制台的其他错误信息，排查是否存在其他模块配置问题。

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