Angular 16 esbuild构建独立组件时出现ɵcmp未定义TypeError

问题概述 #

切换到Angular默认构建器后站点无法访问，改用esbuild测试构建器后站点可运行，但抛出Cannot read properties of undefined (reading 'ɵcmp')错误。排查发现问题关联columns-channel组件，将该组件模板内容直接复制到photos组件模板并适配后可正常运行，核心原因是组件类未被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)

针对性解决方案 #

1. 清理构建缓存与重编译 #

esbuild构建器的缓存机制可能导致旧的未编译组件残留，执行以下步骤彻底清理：

• 清理Angular全局缓存：

  ng cache clean
  

• 删除本地依赖与构建产物，重新安装并构建：

  rm -rf node_modules dist
  npm install
  ng build --builder=@angular-devkit/build-angular:application
  

2. 校验独立组件导入完整性 #

确认columns-channel组件的所有依赖都已正确导入，且组件配置无误：

• 检查columns-channel.component.ts的imports数组，确保InfiniteScrollModule、CardComponent等依赖都已正确引入，无拼写错误
• 确认PhotosComponent中ColumnsChannelComponent的导入路径正确，未使用相对路径的错误写法

3. 修复输入属性的初始化问题 #

columns-channel组件的items输入属性使用非空断言，但PhotosComponent中photos初始值为undefined，触发esbuild编译时的类型推断异常：

• 修改columns-channel.component.ts的输入属性，添加默认空数组：

  @Input() items: any[] = [];
  

• 同时在photos组件模板中添加空值校验，避免传递undefined：

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

4. 检查模板语法兼容性 #

esbuild对Angular模板的解析逻辑与默认构建器存在差异，需确保模板语法合规：

• 确认*ngFor的trackByFn绑定正确，避免隐式依赖
• 若InfiniteScrollModule未正确导出指令，尝试显式导入该指令而非整个模块

修正后的核心代码示例 #

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();
  }
}

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;
  }
}

内容的提问来源于stack exchange，提问作者Azeo Rs