Angular 17拖拽看板空白，报TypeError读取undefined的'None'属性

1. 确认Angular CDK与Angular版本匹配 #

Angular 17必须搭配**@angular/cdk 17.x.x**版本运行，版本不匹配会导致依赖枚举未加载的错误。执行以下命令检查并更新：

# 查看当前CDK版本
npm list @angular/cdk

# 更新到对应17版本
npm install @angular/cdk@17 --save

2. 检查组件的导入配置（针对Standalone组件） #

Angular 17默认推荐使用Standalone组件，确保组件在imports数组中正确导入DragDropModule，若用到*ngFor等通用指令，还需导入CommonModule：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DragDropModule, CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-kanban',
  standalone: true,
  imports: [CommonModule, DragDropModule], // 必须包含这两个模块
  templateUrl: './kanban.component.html',
  styleUrls: ['./kanban.component.css']
})
export class KanbanComponent {
  todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
  done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex,
      );
    }
  }
}

3. 检查模板中的指令使用 #

确保模板里的cdkDropList和cdkDrag指令无拼写错误，且正确绑定数据：

<div class="kanban-container">
  <div cdkDropList [cdkDropListData]="todo" class="kanban-column" (cdkDropListDropped)="drop($event)">
    <h2>Todo</h2>
    <div class="kanban-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>

  <div cdkDropList [cdkDropListData]="done" class="kanban-column" (cdkDropListDropped)="drop($event)">
    <h2>Done</h2>
    <div class="kanban-item" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

4. 排查CommonModule相关枚举加载问题 #

报错指向common.mjs中的None，大概率是ViewEncapsulation.None未被正确加载。若组件手动设置了encapsulation属性，需确保正确导入ViewEncapsulation：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  // ...其他配置
  encapsulation: ViewEncapsulation.None // 确保已导入ViewEncapsulation
})

若以上步骤无效，尝试清除缓存并重新构建：

# 清除依赖包与锁文件
rm -rf node_modules package-lock.json
npm install

# 清除Angular构建缓存
ng cache clean
ng build

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