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
To solve my problem, I reset the node_modules, which corrected the installation and solved the problem