Angular 16：错误类型错误：无法读取未定义的属性（读取“ɵcmp”）

Question

您好，我的独立组件有问题，因为我切换到默认构建器工作，但无法访问该站点，所以我在 esbuild 测试中使用新的构建器，它最终可以工作，但我收到此错误：

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)

照片.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>

所以问题来自：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>

这是它的内容，我有与上面相同的错误，所以如果我复制：columns-channel.html的内容并将其放入：photos.component.html中，通过进行必要的修改，它工作得很好，我的印象是它们不要编译我所有的课程。所以问题是它并没有在所有地方都这样做，我不明白为什么。

Answer 1

我也有同样的问题。你能和我分享一下你是如何解决这个问题的吗？