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

419 Views Asked by At

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

There are 1 best solutions below

0
On BEST ANSWER

To solve my problem, I reset the node_modules, which corrected the installation and solved the problem