I have a modal, in which one I would use a component (ngx-image-cropper) but I get this error everytime "Cannot read property instance of undefined" on the image-cropper.
Preview() is called successfully and this.logoToUpload works fine, the problem is to open the modal with the image-cropper component, otherwise also the modal works fine.
Here is my code:
import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
@Component({
selector: 'logo',
templateUrl: './logo.component.html',
styleUrls: ['./logo.component.scss']
})
export class LogoComponent implements OnInit {
constructor(
private modalService: NgbModal,
) {}
ngOnInit() {}
preview(content) {
var mimeType = this.logoToUpload.type;
if (mimeType.match(/image\/*/) == null) {
return;
}
debugger;
// Show preview
this.modalService.open(content).result.then(
(result) => {
//DO SOMETHING IN CASE RESULT IS SAVE OR NOT
}, (reason) => {
});
}
HTML:
<ng-template #modalCroppingImage let-modal>
<div class="modal-header modal-header-new">
Select area
</div>
<div class="modal-body">
<image-cropper [imageFile]="logoToUpload"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"></image-cropper>
</div>
<div>
<button type="button" class="btn btn-primary button-modal-detail-new" (click)="modal.close('Save'); resetView();">SAVE<!--Close--></button>
<button type="button" class="btn btn-primary button-modal-detail-new" (click)="modal.close('Close'); resetView();">CLOSE<!--Close--></button>
</div>
</ng-template>
Edit: I also get this error:
StaticInjectorError(AppModule)[ImageCropperComponent -> CropService]: StaticInjectorError(Platform: core)[ImageCropperComponent -> CropService]: NullInjectorError: No provider for CropService!
I found the problem, ngx-image-cropper is no more supported on Angular 8. If you have the same problem, you have to install the 3.3.5 version.