Angular报Can't bind to 'ngForOf'非div已知属性错误排查

问题复现代码 #

模板文件 #

<div class="navigation" *ngFor="let nav of navList">
      {{ nav }} 
</div>

组件逻辑文件 #

@Input() navList: string[] = ['test1', 'test2', 'test3'];

已知前提 #

已在根模块app.module、当前组件所属特性模块中正确导入CommonModule、BrowserModule、BrowserAnimationsModule，页面无内容渲染，控制台抛出错误：

NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'div'.

可排查修复方向 #

• 确认组件已在对应模块的declarations数组中完成声明：组件必须被归属模块声明才能使用模块导入的内置指令，且单个组件仅能被一个模块声明，重复声明、漏声明都会导致指令解析失败。
• 核对模块导入规则：BrowserModule仅能在根模块AppModule中导入，所有特性模块只需导入CommonModule即可，特性模块重复导入BrowserModule会引发依赖冲突，导致内置指令失效。
• 排查模板语法拼写问题：检查*ngFor是否存在大小写错误、格式错误，比如误写为*ngfor、of关键字前后漏写符号、多余空格等，格式错误时Angular会将其识别为普通属性绑定，无法匹配内置结构指令。
• 校验独立组件配置：如果使用Angular 14+的独立组件（配置standalone: true），这类组件不依赖模块声明，必须在组件自身的imports数组中导入CommonModule或NgForOf指令，模块层导入的CommonModule对独立组件无效。
• 清理编译缓存：停止本地开发服务，删除项目根目录下的.angular缓存文件夹，重新执行ng serve启动项目，旧编译缓存经常会引发模块导入正常但指令识别异常的偶发问题。
• 排查重名指令冲突：确认项目中没有自定义同名的ngFor结构指令，避免自定义指令覆盖Angular内置的NgForOf指令导致解析失败。
• 多项目工作区校验：如果是monorepo多项目结构，确认模块导入的CommonModule来自@angular/common包，没有错误引用其他子项目自定义的重名模块。

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