NG0303错误求助：div无法绑定'ngForOf'问题排查

一、模块导入细节核查 #

• 确认CommonModule是在**TestComponent所属的特性模块**中导入，而非仅在根模块AppModule中。根模块用BrowserModule，特性模块必须单独导入CommonModule才能使用*ngFor这类通用指令。
• 检查模块的declarations数组：确保TestComponent只被声明一次，且没有错误地放到imports或providers数组内。

二、webpack相关排查点 #

• 排查过度优化导致的指令丢失：
  • 检查webpack配置中是否存在tree-shaking或module规则误删了@angular/common的关键导出。可以在resolve.alias中显式指定@angular/common的路径，强制解析正确的包：

    resolve: {
      alias: {
        '@angular/common': path.resolve(__dirname, 'node_modules/@angular/common')
      }
    }
    

  • 禁用自定义的HTML/TS loader：如果项目用了非Angular官方的loader处理组件模板或代码，可能破坏指令识别逻辑，暂时注释相关loader配置后重新编译测试。
• 校验tsconfig.json配置：
  • 确保moduleResolution为node，target设置为ES2020及以上版本，避免模块解析异常。
  • 检查paths配置是否覆盖了@angular/common的默认路径，导致导入了错误的文件。

三、组件与模板语法检查 #

• 确认*ngFor语法完全正确：
  • 必须是*ngFor="let item of items"的格式，避免拼写错误（比如漏写星号、写成[ngForOf]却未配合let语法）。
  • 组件类中需正确定义迭代变量，比如public items: any[] = [];，确保模板能访问到该变量。
• 独立组件特殊处理：如果TestComponent设置了standalone: true，必须在组件自身的imports数组中导入CommonModule，不能依赖模块的导入配置。

四、复现包快速排查步骤 #

1. 解压后执行npm install && ng serve，确认错误稳定复现。
2. 新建一个极简测试组件，仅保留*ngFor模板代码，验证是否能正常运行，以此排除全局配置问题。
3. 对比新组件与TestComponent的模块归属、导入配置，定位差异点。
4. 检查项目中是否有自定义NgModule封装或第三方库修改了Angular模块系统，导致指令未被正确注册。

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