英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论