Angular报错：Can't bind to 'ngForOf'，已导入CommonModule仍未解决

问题根源 #

你的AdduserComponent属于UsersModule，但AppModule并未导入UsersModule，而是直接在app-routing.module.ts中引用了该组件。这种情况下，Angular会将AdduserComponent视为独立组件，不会加载它所属模块中的CommonModule，导致*ngFor指令无法被识别。

解决方案 #

方案一：使用懒加载（推荐，符合模块化架构）

1. 修改app-routing.module.ts的路由配置，改为加载UsersModule而非直接引用组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { 
    path: 'users', 
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule) 
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. 在users-routing.module.ts中配置子路由（确保UsersModule内部路由正确）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdduserComponent } from './adduser/adduser.component';

const routes: Routes = [
  { path: '', component: AdduserComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule {}

方案二：直接在AppModule中导入UsersModule

修改app.module.ts，将UsersModule加入imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsersModule } from './users/users.module'; // 导入UsersModule

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, UsersModule], // 添加到imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

原理说明 #

Angular的内置指令（如*ngFor）由CommonModule提供，组件只能访问其所属模块（或上级导入模块）中声明的指令。你之前的写法跳过了UsersModule的加载流程，导致CommonModule未被应用到AdduserComponent，从而触发指令未识别的错误。

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