Cannot read property instance of undefined Angular 8

Question

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!

Try `public modalService`? Just a guess. Also, in your view, `modal` is undefined (there is no `this.modal` in your component), I guess it should be `(click)="modalService.close('Save')"` — Jeremy Thille, Sep 03 '21 at 12:47
There's `let-modal` on the template. It's a `ng-bootstrap` modal: https://ng-bootstrap.github.io/#/components/modal/examples#basic — Totati, Sep 03 '21 at 13:07
I saw I also get this error in console: StaticInjectorError(AppModule)[ImageCropperComponent -> CropService]: StaticInjectorError(Platform: core)[ImageCropperComponent -> CropService]: NullInjectorError: No provider for CropService! — Rob None, Sep 03 '21 at 13:45

score 0 · Accepted Answer · answered Sep 03 '21 at 15:48

0

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.

answered Sep 03 '21 at 15:48

Rob None

479
2
9
22

Cannot read property instance of undefined Angular 8

1 Answers1