Angular中使用ngx-image-cropper出现NG0203错误求助

错误原因 #

你的组件类缺少@Component装饰器，Angular无法将其识别为合法组件，导致ngx-image-cropper内部的依赖注入无法在正确上下文执行，触发NG0203错误。

修复步骤 #

1. 给AdhesionFormComponent添加@Component装饰器，补充组件元数据（选择器、模板路径等）
2. 确保组件已在对应模块的declarations数组中声明
3. 验证ngx-image-cropper版本与Angular版本兼容（例如Angular 14+需使用ngx-image-cropper 6.x及以上版本）

修改后的TS代码 #

import {Component} from '@angular/core';
import {ImageCroppedEvent} from "ngx-image-cropper";

@Component({
  selector: 'app-adhesion-form', // 自定义组件选择器
  templateUrl: './adhesion-form.component.html', // 对应HTML文件路径
  // 若使用内联模板，可替换为template: `你的HTML代码`
})
export class AdhesionFormComponent{
  
  imageChangedEvent: any = '';
  croppedImage: any = '';

  constructor() { }

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }
  imageLoaded() {
    // show cropper
  }
  cropperReady() {
    // cropper ready
  }
  loadImageFailed() {
    alert("une erreure s'est produite.")
  }
}

额外检查 #

确认已在模块中导入ImageCropperModule并添加到imports数组：

import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
  imports: [
    // ...其他模块
    ImageCropperModule
  ],
  declarations: [AdhesionFormComponent]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者Léandre