обрезка изображения в angular4 выдает ошибку разбора шаблона

Question

Я использовал npm install ng2-img-cropper --save и пытался обрезать изображения, но я сталкиваюсь с некоторыми ошибками, такими как ошибки синтаксического анализа шаблона. Не удалось найти причину ошибки. Прикрепленный снимок ошибки с этим. любые другие зависимости я пропускаю или что-то.

Appcomponent.ts

 import {Component, ViewChild, Type} from '@angular/core';

import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-cropper';

@Component({
  selector: 'app-root',
    templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})


export class AppComponent extends Type {
  //Cropper 1 data
 data1:any;

 cropperSettings1:CropperSettings;


 @ViewChild('cropper', undefined) cropper:ImageCropperComponent;

 constructor() {
     super();

       this.cropperSettings1 = new CropperSettings();
     this.cropperSettings1.width = 200;

     this.cropperSettings1.croppedWidth = 200;
     this.cropperSettings1.croppedHeight = 200;

     this.cropperSettings1.canvasWidth = 500;
     this.cropperSettings1.canvasHeight = 300;

     this.cropperSettings1.minWidth = 100;
     this.cropperSettings1.minHeight = 100;

     this.cropperSettings1.rounded = false;

     this.cropperSettings1.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
     this.cropperSettings1.cropperDrawSettings.strokeWidth = 2;

     this.data1 = {};


 }

 cropped(bounds:Bounds) {
     //console.log(bounds);
 }

 /**
  * Used to send image to second cropper
  * @param $event
  */
 fileChangeListener($event) {
     var image:any = new Image();
     var file:File = $event.target.files[0];
     var myReader:FileReader = new FileReader();
     var that = this;
     myReader.onloadend = function (loadEvent:any) {
         image.src = loadEvent.target.result;
         that.cropper.setImage(image);

     };

     myReader.readAsDataURL(file);
 }
}

Appcomponent.html

<div>
    <div class="pull-left">
        <img-cropper [ima
        ge]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)"></img-cropper>
        <br>
        <span class="result" *ngIf="data1.image" >
            <img [src]="data1.image" [width]="cropperSettings1.croppedWidth" [height]="cropperSettings1.croppedHeight">
        </span>
    </div>




</div>