Ionic/Angular报错：无法为div绑定'ngIf'属性，引入CommonModule仍失效

开发者阿泽

2026-9-24

问题根因与解决方案

你提供的代码里存在明确的模块导入语法错误，直接导致CommonModule未被正确加载，这是*ngIf报错的核心原因：

edit-page.module.ts的imports数组中，BrowserModule后缺失逗号，且子模块不需要导入BrowserModule（该模块仅允许在根模块AppModule中导入一次），语法错误导致整个导入数组解析失败，即使你写了CommonModule也不会生效。

其他可能导致该问题的原因

路由配置异常：检查路由规则中EditPagePage对应的加载模块是否正确，若组件被路由挂载到了未导入CommonModule的模块下会触发该报错
编译缓存残留：Angular本地编译缓存可能存在异常，即使重启服务也未更新最新代码
组件重复声明：若EditPagePage同时被多个模块声明，会导致模块归属异常，无法继承当前模块的导入能力
共享模块导出异常：如果你的SharedModule封装了CommonModule，需要确认CommonModule被加入了SharedModule的exports数组，否则其他模块导入SharedModule也无法使用*ngIf等基础指令

修正步骤

修正edit-page.module.ts代码，删除冗余的BrowserModule导入、补全数组语法：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { EditPagePageRoutingModule } from './edit-page-routing.module';
import { EditPagePage } from './edit-page.page';
import { SharedModule } from 'src/app/shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    IonicModule,
    EditPagePageRoutingModule,
    SharedModule
  ],
  declarations: [EditPagePage]
})
export class EditPagePageModule {}