Angular CDK拖拽组件报错NG8003/NG8002，求修复方案

错误原因分析 #

你遇到的两个编译错误本质是同一个问题：HomeBoardsComponent 未在模块中声明，且其所在模块未正确关联CDK拖拽模块：

• NG8003：模板中使用的cdkDropList导出指令无法被识别，因为组件未被模块注册，Angular无法解析模板中的指令引用
• NG8002：cdkDropListData属性不被div识别，因为组件所在模块未导入DragDropModule，Angular不知道该属性属于CDK拖拽指令

解决步骤 #

1. 在AppModule中声明HomeBoardsComponent
   打开你的AppModule，将HomeBoardsComponent添加到declarations数组中，同时确保顶部导入该组件：

   修改后的AppModule核心代码片段：

   // 顶部添加组件导入
   import { HomeBoardsComponent } from './subPages/home-boards/home-boards.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       NavbarComponent,
       FooterComponent,
       LogInComponent,
       HomePageComponent,
       RegisterComponent,
       AuthComponent,
       GetDataComponent,
       BoardsComponent,
       HomeBoardsComponent // 新增这一行
     ],
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       AppRoutingModule,
       MatToolbarModule,
       MatButtonModule,
       HttpClientModule,
       FormsModule,
       ReactiveFormsModule,
       DragDropModule, // 你已正确导入此模块
       ToastrModule.forRoot({}),
       MDBBootstrapModule.forRoot()
     ],
     // 其他配置保持不变
   })
   export class AppModule { }
   

2. 确认DragDropModule的导入范围
   如果HomeBoardsComponent属于某个独立的Feature Module（而非直接在AppModule下），则需要在该Feature Module的imports数组中同样导入DragDropModule，而不是只在AppModule中导入。

验证 #

修改完成后，重新执行ng serve编译项目，两个编译错误应该会消失。

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