Angular 16 : ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

Hello I have a problem with the standalone components since I switched to the default builder working but impossible to access the site so I use the new builder in esbuild test and with it it finally works but I get this error :

ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
at getComponentDef (core.mjs:1930:12)
at extractDirectiveDef (core.mjs:1759:12)
at core.mjs:1992:21
at Array.map (<anonymous>)
at core.mjs:1992:10
at createTView (core.mjs:12116:63)
at getOrCreateComponentTView (core.mjs:12065:28)
at addComponentLogic (core.mjs:12800:19)
at instantiateAllDirectives (core.mjs:12603:9)
at createDirectivesInstances (core.mjs:12028:5)
at ɵɵelementStart (core.mjs:16319:9)
at Module.ɵɵelement (core.mjs:16377:5)
at PhotosComponent_Template (photos.component.html:14:3)
at executeTemplate (core.mjs:11986:13)
at renderView (core.mjs:13184:13)

photos.component.ts

@Component({
      selector: 'photos',
      standalone: true,
      templateUrl: './photos.component.html',
      styleUrls: ['./photos.component.scss'],
      imports: [
        TranslocoDirective,
        ColumnsChannelComponent,
      ],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class PhotosComponent implements OnInit, OnDestroy {
      public photos: IPhoto[];
    
      private _destroyed$ = new Subject();
    
      constructor(
        private readonly _activatedRoute: ActivatedRoute,
      ) {}
    
      public ngOnInit(): void {
          this.fetch();
      }
    
      public fetch(): void {
        this._activatedRoute.data.pipe(takeUntil(this._destroyed$)).subscribe({
          next: (data) => {
            this.photos = data.photos.map((photo: IPhoto) =>
                Object.assign(photo, {
                  url: photo.url,
                  contentWidth: 320,
                  contentHeight: 320,
                  parentTitle: "PHOTOS_TITLE",
                  pool: "photos",
                })
              );
          },
        });
      }
    
      public ngOnDestroy(): void {
        this._destroyed$.next(true);
        this._destroyed$.complete();
      }
    }

photos.component.html

<header class="photos__header">
  <div class="photos__header__container wrapper">
    <div class="photos__header__image__wrapper">
      <div class="photos__header__image"></div>
    </div>
    <div class="photos__header__content">
      <h1 class="photos__header__title" transloco="PHOTOS_TITLE"></h1>
      <p transloco="PHOTOS_DESCRIPTION"></p>
    </div>
  </div>
</header>

<section class="wrapper wrapper--content">
  <columns-channel [items]="photos" />
</section>

So the problem would come from: columns-channel

columns-channel.component.ts

@Component({
  selector: 'columns-channel',
  templateUrl: './columns-channel.component.html',
  standalone: true,
  imports: [
    InfiniteScrollModule,
    NgFor,
    CardComponent,
    AvatarComponent,
    SlicePipe,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ColumnsChannelComponent {
  @Input() items!: any;

  public limit = 16;

  public onScroll(): void {
    this.limit = this.limit + 8;
  }

  public trackByFn(index: number, item: any) {
    return item.id;
  }
}

columns-channel.html :

<div (scrolled)="onScroll()" [infiniteScrollDistance]="1" class="columns" infiniteScroll>
  <card *ngFor="let item of items | slice: 0:limit" [item]="item" class="columns__column">
    <avatar [user]="item?.creator" class="card__creator"></avatar>
  </card>
</div>

Here is its content I have the same error as above so if I copy the content of: columns-channel.html and put it in: photos.component.html by making the necessary modifications it works very well I have the impression that they don't compile all my classes. So the problem is that it doesn't do it everywhere and I don't understand why.

Recommended topics

Hot tags