英文:
ngx-image-cropper in angular, ERROR Error: Uncaught (in promise): Error: NG0203: inject()
问题
我正在开发一个注册表单。在这个表单中,我要求用户上传照片。为了遵守精确的格式,我想提供一个工具直接调整用户的照片大小。所以我开始使用 ngx-image-cropper,它似乎非常有用和功能强大。问题是,按照教程进行后,我遇到了一个无法解决的错误:ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.io/errors/NG0203.
这是我的代码:
TS
import {Component} from '@angular/core';
import {ImageCroppedEvent} from "ngx-image-cropper";
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("An error occurred.")
  }
HTML
      <input type="file" (change)="fileChangeEvent($event)" />
      <image-cropper
        [imageChangedEvent]="imageChangedEvent"
        [maintainAspectRatio]="true"
        [aspectRatio]="4 / 3"
        [resizeToWidth]="128"
        format="png"
        (imageCropped)="imageCropped($event)"
        (imageLoaded)="imageLoaded()"
        (cropperReady)="cropperReady()"
        (loadImageFailed)="loadImageFailed()"
      ></image-cropper>
      <img [src]="croppedImage" />
我期望 ngx-image-cropper 像教程中一样工作。
英文:
I am developing a registration form. In this form I ask a photo to the user. In order to respect a precise format, I want to propose a tool to resize directly the user's picture. So I started with ngx-image-cropper which seems to be very useful and functional. The problem is that after following the tutorial, I have an error that I can't solve : ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.io/errors/NG0203.
here is my code :
TS
import {Component} from '@angular/core';
import {ImageCroppedEvent} from "ngx-image-cropper";
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.")
  }
HTML
      <input type="file" (change)="fileChangeEvent($event)" />
      <image-cropper
        [imageChangedEvent]="imageChangedEvent"
        [maintainAspectRatio]="true"
        [aspectRatio]="4 / 3"
        [resizeToWidth]="128"
        format="png"
        (imageCropped)="imageCropped($event)"
        (imageLoaded)="imageLoaded()"
        (cropperReady)="cropperReady()"
        (loadImageFailed)="loadImageFailed()"
      ></image-cropper>
      <img [src]="croppedImage" />
i was expecting the ngx-image-cropper work as in the tutorial
答案1
得分: 0
我重置了node_modules以解决我的问题,这修复了安装并解决了问题。
英文:
To solve my problem, I reset the node_modules, which corrected the installation and solved the problem
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论