Angular Material拖拽报错：无exportAs为cdkDropList的指令

我之前也踩过这个坑，其实问题根源很明确——你虽然在组件里导入了拖拽相关的类，但没有在模块层面引入DragDropModule，导致Angular无法识别模板里的cdkDropList指令，自然找不到它的exportAs配置了。

下面是具体的解决步骤：

1. 找到你的组件所属的模块文件（比如app.module.ts，或者你自定义的功能模块）
2. 从@angular/cdk/drag-drop导入DragDropModule
3. 将DragDropModule添加到模块的imports数组中

举个例子，你的模块代码应该改成这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 别忘了导入这个关键模块！
import { DragDropModule } from '@angular/cdk/drag-drop';

import { CdkDragDropConnectedSortingExample } from './cdk-drag-drop-connected-sorting-example';

@NgModule({
  imports: [
    BrowserModule,
    DragDropModule // 把它加到这里
  ],
  declarations: [CdkDragDropConnectedSortingExample],
  bootstrap: [CdkDragDropConnectedSortingExample]
})
export class AppModule { }

另外还要确认两个细节：

• 你已经正确安装了@angular/cdk包，如果还没装，运行npm install @angular/cdk（或者用yarn/pnpm）
• 确保Angular核心包和CDK的版本保持一致，版本不匹配也可能引发这类奇怪的指令识别问题

这样修改之后，模板里的cdkDropList指令就能被正确识别，那个错误应该就消失了。

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