1

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

Léandre
  • 45
  • 6
  • most of the times this means that an inject() function is called outside of the constructor. I don't see that in your code here. Could you provide an sample of where the error occurs – Nathan T. May 10 '23 at 13:16
  • Here full error message : 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 RuntimeError@http://localhost:4200/vendor.js:127618:5 injectInjectorOnly@http://localhost:4200/vendor.js:128161:11 ɵɵinject@http://localhost:4200/vendor.js:128172:59 ɵɵdirectiveInject@http://localhost:4200/vendor.js:140021:12 ImageCropperComponent_Factory@http://localhost:4200/vendor.js:167224:86 – Léandre May 10 '23 at 13:24
  • getNodeInjectable@http://localhost:4200/vendor.js:48924:38 instantiateAllDirectives@http://localhost:4200/vendor.js:59804:40 createDirectivesInstances@http://localhost:4200/vendor.js:59137:27 ɵɵelementStart@http://localhost:4200/vendor.js:62718:30 AdhesionFormComponent_Template@http://localhost:4200/main.js:290:52 etc... So i suppose it come frome the ngx-image-cropper, bc i don't use any inject in my code... – Léandre May 10 '23 at 13:27
  • which version of angular are you using? because ngx-image-cropper is only supported on `13+` – Nathan T. May 10 '23 at 14:40
  • *version `6.0` is only supported on `Angular 13+` – Nathan T. May 10 '23 at 14:55
  • i'm using version 14.2.6, is 13+ means 13.0.0 until 14.0.0 or 13.0.0 until last version release ? – Léandre May 10 '23 at 15:00
  • just made an stackblitz with `angular 15` seems to work fine https://stackblitz.com/edit/angular-jhaubv?file=src/main.ts – Nathan T. May 10 '23 at 15:07
  • have you imported the ImageCropperModule? – Nathan T. May 10 '23 at 15:11
  • Ye si have, in app.module.ts `import {ImageCropperModule} from "ngx-image-cropper";` nad in the imports. And in my component i import `import {ImageCroppedEvent} from "ngx-image-cropper";` and in the imports. – Léandre May 10 '23 at 15:27
  • I can't reproduce your error in stackblitz so can't help you any further. I don't think your error is related to `ngx-image-cropper` tbh. – Nathan T. May 10 '23 at 15:30
  • I have recreate a new angular blank project and the ngx-image-cropper work, but i tried this time in the app.components of my project (not in a component), it is still not working but the error isn't exactly the same : `ERROR Error: NG0203: inject() must be called from an injection context such as a constructor...(same) Angular 4 ImageCropperComponent_Factory ngx-image-cropper.mjs:312 Angular 4 AppComponent_Template app.component.html:52 Angular 28 4431 main.ts:11 Webpack 7 core.mjs:9171:22 Angular 16` – Léandre May 10 '23 at 23:19
  • if the issue indeed comes from the package itself I would suggest making an issue on [their github](https://github.com/Mawi137/ngx-image-cropper) – Nathan T. May 11 '23 at 06:13

1 Answers1

0

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

Léandre
  • 45
  • 6