ngx-image-cropper in angular, ERROR Error: Uncaught (in promise): Error: NG0203: inject()

huangapple go评论66阅读模式
英文:

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 &#39;@angular/core&#39;;
import {ImageCroppedEvent} from &quot;ngx-image-cropper&quot;;

export class AdhesionFormComponent{
  
  imageChangedEvent: any = &#39;&#39;;
  croppedImage: any = &#39;&#39;;

  constructor() { }

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

HTML

      &lt;input type=&quot;file&quot; (change)=&quot;fileChangeEvent($event)&quot; /&gt;

      &lt;image-cropper
        [imageChangedEvent]=&quot;imageChangedEvent&quot;
        [maintainAspectRatio]=&quot;true&quot;
        [aspectRatio]=&quot;4 / 3&quot;
        [resizeToWidth]=&quot;128&quot;
        format=&quot;png&quot;
        (imageCropped)=&quot;imageCropped($event)&quot;
        (imageLoaded)=&quot;imageLoaded()&quot;
        (cropperReady)=&quot;cropperReady()&quot;
        (loadImageFailed)=&quot;loadImageFailed()&quot;
      &gt;&lt;/image-cropper&gt;

      &lt;img [src]=&quot;croppedImage&quot; /&gt;

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

huangapple
  • 本文由 发表于 2023年5月10日 20:46:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76218605.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定