html - NG8002: No se puede enlazar a 'cdkDropListData' ya que no es una propiedad conocida de 'table'

Estoy recibiendo este error "NG8002: No se puede enlazar a 'cdkDropListData' ya que no es una propiedad conocida de 'table'." y cada solución que veo en línea es solo "agregarlo al módulo", pero ya está en el módulo, así que simplemente no entiendo por qué estoy recibiendo este error.

También recibo una advertencia que supongo está relacionada en la medida en que es un módulo importado que no está siendo "visto": NG8103: La directiva *ngFor se usó en la plantilla, pero ni la directiva NgFor ni el CommonModule fueron importados. Usa el flujo de control incorporado @for de Angular o asegúrate de que la directiva NgFor o el CommonModule estén incluidos en el array @Component.imports de este componente.

Me pregunto si hay algo que no funciona con la forma en que están estructuradas mis importaciones. Soy consciente de que son algo redundantes en este punto, pero eso es el resultado de intentar una y otra vez hacer que reconozca estas importaciones.

aquí está mi módulo de aplicación

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { CarrierComponent } from './entities/carrier.component'; // import it directly
import { NgForOf, CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    CarrierComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    DragDropModule,
    NgForOf
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

componente de la aplicación html

<div class="container mt-5">
  <div *ngFor="let carrier of carriers" class="card bg-secondary mx-auto mb-2">
    <div class="card-body table-container">
      <div class="row">
        <div class="col-xl-8">
          <h2>{{ carrier.name }}</h2>
        </div>
        <div class="col-xl-4">
          <h2 class="total-size">{{ carrier.getCurrentTotal() }} / {{ carrier.capacity }}</h2>
        </div>
      </div>
      <div class="table-responsive mb-0 pb-0" style="font-size: 20px;">
        <table cdkDropList [cdkDropListData]="carrier.items" (cdkDropListDropped)="onDrop($any($event), carrier)" class="table table-hover">
          <thead>
          <tr>
            <th class="bg-info bg-opacity-25">Item</th>
            <th class="bg-info bg-opacity-25">Size</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of carrier.items" cdkDrag class="bg-info bg-opacity-25">
            <td>{{ item.name }}</td>
            <td>{{ item.size }}</td>
          </tr>
          </tbody>
          <tbody>
          <tr *ngFor="let container of carrier.containers" cdkDrag class="bg-info bg-opacity-25">
            <td>{{ container.name }}</td>
            <td>{{ container.getCurrentTotal() }} / {{ container.capacity }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

y componente de la app ts:

import { Component, OnInit } from '@angular/core';
import { EXAMPLE_CARRIERS } from './example.data';
import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { Item } from './entities/item';
import { Carrier } from './entities/carrier';
import {Container} from './entities/container';
import {NgFor, CommonModule} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  carriers = EXAMPLE_CARRIERS;

  // Handles the drop event when items are moved between carriers
  onDrop(event: CdkDragDrop<Item[], any>, target: Carrier | Container) {
    const movedItem = event.item.data;
    const sourceContainer = event.previousContainer.data;

    const itemIndex = sourceContainer.findIndex((item: any) => item.id === movedItem.id);
    sourceContainer.splice(itemIndex, 1);

    if (target instanceof Carrier) {
      target.items.push(movedItem);
    } else {
      target.items.push(movedItem);
    }
  }

  ngOnInit() {}
}

¿Qué estoy haciendo mal aquí? Soy nuevo en Angular y esto me está dando ganas de arrancarme el cabello.

EDIT: main.ts como se pidió en los comentarios:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Respuesta #1

Estás usando la metodología independiente, por lo que necesitas agregar las importaciones en el propio componente de ahora en adelante. Creo que estás usando Angular 19, así que ejecuta el script de migración de Angular para convertir tus componentes a independientes.

Migración de Angular independiente

Anatomía de un componente

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [
    CommonModule,
    DragDropModule,
  ],
})
export class AppComponent implements OnInit {
  ...

Una vez que la migración esté completada, ya no necesitarás el módulo de la aplicación. También hay una migración para eso, para deshacerse de los módulos, después de pasar a independiente.