I’m building this simple Kanban board using Angular’s drag and drop CDK Earlier today it was working fine, but now all I’m getting a blank screen, the console shows:

TypeError: Cannot read properties of undefined (reading 'None') at common.mjs:3066:33

My code is pretty much a copy paste of the Angular’s code.

HTML:

<main>
    <div class="boardWrapper">
        <div class="example-container">
            <h2>To do</h2>

            <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
                class="example-list" (cdkDropListDropped)="drop($event)">
                @for (item of todo; track item) {
                <div class="example-box" cdkDrag>{{item}}</div>
                }
            </div>
        </div>

        <div class="example-container">
            <h2>Done</h2>

            <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
                class="example-list" (cdkDropListDropped)="drop($event)">
                @for (item of done; track item) {
                <div class="example-box" cdkDrag>{{item}}</div>
                }
            </div>
        </div>


    </div>
</main>

TS

import { Component } from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
  CdkDragHandle
} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styleUrl: './board.component.css',
  standalone: true,
  imports: [CdkDropList, CdkDrag, CdkDragHandle],
})
export class BoardComponent {
  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,
      );
    }
  }



}

This is the part the console is highlighting with the error, but I don’t know what to make of it:

**static {
this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({
  type: NgClass,
  selectors: [["", "ngClass", ""]],
  inputs: {
    klass: [i0.ɵɵInputFlags.None, "class", "klass"],
    ngClass: "ngClass"
  },
  standalone: true
});

}**

I’m running Angular 17

Searched on internet and stack overflow but the solutions are all related to the specific OP’s problem, not general.