title: Error in Using Cropperjs in AngularCli project
body: <p>I user croperjs for my AngularCli Project for image croping. but there are some errors.. I try it several times but it still there what do i do to fixed it?</p>
  
  <p>errors are:</p>
  
  <blockquote>
    <p>error TS2339: Property 'files' does not exist on type 'EventTarget'.</p>
    
    <p>error TS2339: Property 'result' does not exist on type 'EventTarget'.</p>
    
    <p>error TS2339: Property 'result' does not exist on type 'EventTarget'.
    error TS2540: Cannot assign to 'cropper' because it is a constant or a read-only property.</p>
    
    <p>error TS2339: Property 'files' does not exist on type 'EventTarget'.</p>
    
    <p>error TS2339: Property 'getCroppedCanvas' does not exist on type '""'.</p>
    
    <p>error TS2339: Property 'value' does not exist on type 'Element'.</p>
    
    <p>error TS2339: Property 'src' does not exist on type 'Element'.</p>
    
    <p>error TS2339: Property 'download' does not exist on type 'Element'.</p>
  </blockquote>
  
  <p><strong>my html file is:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;main class="page"&gt;
      &lt;h2&gt;Upload,Crop and save.&lt;/h2&gt;
      &lt;!-- input file --&gt;
      &lt;div class="box"&gt;
          &lt;input type="file" id="file-input"&gt;
      &lt;/div&gt;
      &lt;!-- leftbox --&gt;
      &lt;div class="box-2"&gt;
          &lt;div class="result"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--rightbox--&gt;
      &lt;div class="box-2 img-result hide"&gt;
          &lt;!-- result of crop --&gt;
          &lt;img class="cropped" src="" alt=""&gt;
      &lt;/div&gt;
      &lt;!-- input file --&gt;
      &lt;div class="box"&gt;
          &lt;div class="options hide"&gt;
              &lt;label&gt; Width&lt;/label&gt;
              &lt;input type="number" class="img-w" value="300" min="100" max="1200" /&gt;
          &lt;/div&gt;
          &lt;!-- save btn --&gt;
          &lt;button class="btn save hide"&gt;Save&lt;/button&gt;
          &lt;!-- download btn --&gt;
          &lt;a href="" class="btn download hide"&gt;Download&lt;/a&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>my ts file is:</strong></p>
  
  <pre><code>declare var Cropper: any;
  ....code here...
  export class SixComponent implements OnInit {
  rec = {}
  handlesSize: any;
  currentHandle: false;
  drag: false;
  
  
  //@ViewChild('layout1') canvas;
  constructor() { }
  
  ngOnInit() {
  
  const result = document.querySelector('.result'),
    img_result = document.querySelector('.img-result'),
    img_w = document.querySelector('.img-w'),
    img_h = document.querySelector('.img-h'),
    options = document.querySelector('.options'),
    save = document.querySelector('.save'),
    cropped = document.querySelector('.cropped'),
    dwn = document.querySelector('.download'),
    upload = document.querySelector('#file-input'),
    cropper = '';
  
  // on change show image with crop options
  upload.addEventListener('change', (e) =&gt; {
    debugger;
    if (e.target.files.length) {
      // start file reader
      const reader = new FileReader();
      reader.onload = (e) =&gt; {
        if (e.target.result) {
          // create new image
          let img = document.createElement('img');
          img.id = 'image';
          img.src = e.target.result
          // clean result before
          result.innerHTML = '';
          // append new image
          result.appendChild(img);
          // show save btn and options
          save.classList.remove('hide');
          options.classList.remove('hide');
          // init cropper
          cropper = new Cropper(img);
        }
      };
      reader.readAsDataURL(e.target.files[0]);
    }
  });
  
  // save on click
  save.addEventListener('click', (e) =&gt; {
    e.preventDefault();
    // get result to data uri
    let imgSrc = cropper.getCroppedCanvas({
      width: img_w.value // input value
    }).toDataURL();
    // remove hide class of img
    cropped.classList.remove('hide');
    img_result.classList.remove('hide');
    // show image cropped
    cropped.src = imgSrc;
    dwn.classList.remove('hide');
    dwn.download = 'imagename.png';
    dwn.setAttribute('href', imgSrc);
  });
  
  }
  }
  </code></pre>
  
  <p>Thank you</p>