Angular中NG8002与NG8103错误排查：已导入模块仍未识别

NG8002：无法绑定'cdkDropListData'到'table'的解决步骤 #

• 确认DragDropModule导入路径正确，必须从@angular/cdk/drag-drop导入，而非其他路径
• 检查使用该table的组件所属模块：如果组件在子模块中，仅在AppModule导入DragDropModule无效，需在子模块的imports数组中也添加该模块
• 确保模板中table标签先添加cdkDropList指令，再绑定cdkDropListData，示例：

  <table cdkDropList [cdkDropListData]="tableData">
    <!-- 表格内容 -->
  </table>
  

• 核对Angular CDK版本与Angular核心版本是否一致，版本不兼容会导致指令无法被识别

NG8103：*ngFor未导入警告的解决步骤 #

• 检查使用*ngFor的组件所在模块：子模块不会继承AppModule的CommonModule，需在对应模块的imports中添加CommonModule
• 如果组件是独立组件（设置了standalone: true），需要在组件自身的imports数组中直接导入CommonModule或NgFor
• 确认*ngFor语法无误，示例：

  <tr *ngFor="let row of tableData">
    <td>{{row.name}}</td>
  </tr>
  

通用排查操作 #

• 执行ng serve --clear-cache清除构建缓存，缓存残留可能导致模块导入未生效
• 检查模块的declarations数组，确保使用这些指令的组件已被正确声明
• 若使用懒加载模块，需在对应的懒加载模块中单独导入DragDropModule和CommonModule

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