Angular12使用@angular/cdk/drag-drop无CdkDropListContainer导出报错如何解决

这个报错的核心原因是Angular CDK v9及以上版本已经彻底移除了CdkDropListContainer导出项，该类在v8版本就已被重命名为CdkDropList，你使用的Angular 12对应CDK版本不存在该旧命名导出。

你可以按照以下步骤修改即可解决：

• 删除导入语句中的CdkDropListContainer项，你已经导入的CdkDropList就是原有CdkDropListContainer的替代类，功能完全一致
• 检查组件内所有使用CdkDropListContainer做类型声明的代码（比如@ViewChild绑定的变量类型），全部替换为CdkDropList
• 确认模板中没有引用旧的cdkDropListContainer指令，Angular 12中直接使用cdkDropList指令即可

修改后的正确导入示例：

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import {MatTabsModule} from '@angular/material/tabs';
import { MatInputModule } from '@angular/material/input';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { LeaddialogComponent } from './leaddialog/leaddialog.component';
import {CDK_DROP_LIST} from '@angular/cdk/drag-drop';
// 已移除CdkDropListContainer导入
import { CdkDrag, CdkDragStart, CdkDropList, CdkDropListGroup, moveItemInArray } from "@angular/cdk/drag-drop";

@Component({ 
  selector: 'app-lead-details',
  templateUrl: './lead-details.component.html', 
  styleUrls: ['./lead-details.component.css'] 
})
export class LeadDetailsComponent implements OnInit {

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