Angular开发报错：Can't bind to 'ngIf' 导入CommonModule仍无效

错误信息 #

Can't bind to 'ngIf' since it isn't a known property of div
Can't bind to 'ngIf' since it isn't a known property of 'app-set-username'
Can't bind to 'ngIf' since it isn't a known property of 'app-login'

问题背景 #

已在报错页面对应的module.ts中导入CommonModule，其他页面的*ngIf均正常工作。生产构建可消除该错误，但开发环境下问题持续。此前代码运行正常，仅修改过app-login组件，还原修改后问题仍未解决。移除*ngIf后程序可正常运行，说明组件已正确导入，且login.module.ts中也已导入CommonModule。

报错页面代码 #

HTML代码 #

<div class="user-page-wrapper">
      <app-set-username
          class="set-username"
          *ngIf="setUsernameIsActive"
      ></app-set-username>
      <app-login class="login-window" *ngIf="LoginWindowIsActive"></app-login>
      <div *ngFor="let q of progress">{{q.word}} {{q.familiarity}}</div>
    </div>

模块代码（UserPageModule） #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserPageRoutingModule } from './user.routing.module';
import { MenuModule } from '../../core';
import { LoginModule } from 'src/app/core/components/login/login.module';
import { IonicModule } from '@ionic/angular';
import { UserPage } from './user.page';
import { SetUsernameModule } from 'src/app/core/components/set-username/set-username.module';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    UserPageRoutingModule,
    MenuModule,
    LoginModule,
    IonicModule, // 重复导入
    SetUsernameModule,
    BrowserModule, // 特性模块不应导入BrowserModule
  ],
  declarations: [UserPage],
})
export class UserPageModule {}

正常工作的页面代码 #

HTML代码 #

<div class="home-page-wrapper">
      <app-menu-profile *ngIf="!isAuthenticated"></app-menu-profile>
      
      <router-outlet></router-outlet>
    </div>

模块代码（HomePageModule） #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { MenuModule } from 'src/app/core';
import { ProfileOverviewModule } from 'src/app/core';
import { LoginModule } from 'src/app/core/components/login/login.module';
import { MenuProfileModule } from 'src/app/core/components/menu-profile/menu-profile.module';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    HomePageRoutingModule,
    MenuModule,
    ProfileOverviewModule,
    LoginModule,
    MenuProfileModule,
  ],
  declarations: [HomePage],
})
export class HomePageModule {}

解决方案 #

1. 修正模块导入问题
   特性模块中不应导入BrowserModule，该模块仅需在根模块（AppModule）中导入；同时移除重复的IonicModule导入，修正后的UserPageModule代码如下：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { UserPageRoutingModule } from './user.routing.module';
   import { MenuModule } from '../../core';
   import { LoginModule } from 'src/app/core/components/login/login.module';
   import { IonicModule } from '@ionic/angular';
   import { UserPage } from './user.page';
   import { SetUsernameModule } from 'src/app/core/components/set-username/set-username.module';
   
   @NgModule({
     imports: [
       CommonModule,
       IonicModule,
       UserPageRoutingModule,
       MenuModule,
       LoginModule,
       SetUsernameModule,
     ],
     declarations: [UserPage],
   })
   export class UserPageModule {}
   

2. 清理开发环境缓存并重启服务
   执行以下命令重启开发服务器并清除缓存：

   ng serve --clearCache
   

3. 验证模块依赖
   确保所有嵌套组件的模块（如LoginModule、SetUsernameModule）均正确导入CommonModule，且未出现模块重复导出或导入的情况。

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