Angular 17报错：无法绑定到'ngForOf'，导入CommonModule仍有问题

问题根源 #

在Angular 17的独立组件（standalone component）模式下，组件的依赖是完全隔离的。你在AppComponent中导入CommonModule，仅能让AppComponent自身的模板使用*ngFor这类指令，并不会将这个依赖传递给它引入的子组件（比如UserListComponent）。

*ngFor是CommonModule提供的结构型指令，UserListComponent作为独立组件，其模板要使用该指令，必须在自身的@Component.imports数组中显式导入CommonModule。否则Angular无法识别ngForOf这个绑定属性，进而抛出NG0303错误。

解决步骤 #

修改UserListComponent的代码，将CommonModule添加到它的imports数组中即可：

修改后的UserListComponent示例代码 #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // 导入CommonModule

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule], // 在此处添加CommonModule
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.css'
})
export class UserListComponent {
  names = ['Alice', 'Bob', 'Charlie']; // 确保定义了模板中用到的names数据
}

补充说明 #

• 独立组件的设计核心是自给自足，每个组件都需要明确声明自身依赖的模块，父组件的导入不会自动向下传递。
• 不要通过添加NO_ERRORS_SCHEMA来规避错误，这会掩盖真实问题，导致后续模板中的其他错误无法被及时发现。

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