Unable to find element

[tanyt123]

  cropprGetVal() {
    var newSrc;
    var data: any = [];
    var croppr = <HTMLImageElement>document.getElementById(croppr);
    croppr = croppr as HTMLImageElement;
    this.cropInstance = new Croppr('#croppr', {
      aspectRatio: 1 / 1,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      strict: false,
      guides: false,
      highlight: false,
      dragCrop: false,
      zoomable: false,
      scalable: false,
      rotatable: true,
      cropBoxMovable: false,
      cropBoxResizable: false,
      responsive: true,   
      viewMode: 3,
      maxSize: [50, 50, '%'],
      minSize: [100, 100, 'px'],
      startSize: [50, 50],
      onCropStart: function (value) {
        console.log(value.x, value.y, value.width, value.height);
      },

      onCropEnd: function (value) {
        console.log(value.x, value.y, value.width, value.height);
      }
    });
    data = this.cropInstance.getValue();
    let x = data.x
    let y = data.y
    let width = data.width
    let height = data.height

    var img = new Image();
    img.src = this.base64Image;
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = width
    canvas.height = height
    ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
    console.log(canvas.toDataURL("image/jpeg"))
    this.imgCroppedUrl = canvas.toDataURL("image/jpeg")
  }

 <div *ngIf="base64Image != null">
    <div class="modal">
      <img id="croppr" [src]="base64Image" #imageSrc>
    </div>
  </div>
  <ion-item *ngIf="imgCroppedUrl != null">
    <img [src]="imgCroppedUrl" #imageSrc style="width:100%;height:auto;">
  </ion-item>

it always have a unable to find element. I am confused as how to solve it as it says Uncaught (in promise): Unable to find element. On a side note, is there any angular 4 demo coming soon?