Enlcxx / angular2-resizing-cropping-image

Resize, rotate and crop images(cropper) for Angular 8
https://alyle.io/components/image-cropper
32 stars 6 forks source link

Throw error in production build with aot. #12

Closed javsal closed 6 years ago

javsal commented 6 years ago

Unexpected value 'LyResizingCroppingImageModule in node_modules/angular2-resizing-cropping-image/index.d.ts'. Please add a @NgModule annotation.

alyleui commented 6 years ago

Hi! @javsal this component is now in alyle ui try this

npm i alyle-ui

// app.module.ts
import { LyResizingCroppingImageModule } from 'alyle-ui/resizing-cropping-images';

@NgModule({
  imports: [
    ...
    LyResizingCroppingImageModule
  ],
})
// app.component.ts
import { LyResizingCroppingImages, LyResizingCroppingImagesConfig, CroppedImage } from 'alyle-ui/resizing-cropping-images';

@Component({
  selector: 'resizing-cropping-images-example',
  templateUrl: './resizing-cropping-images-example.component.html',
  styleUrls: ['./resizing-cropping-images-example.component.css']
})
export class ResizingCroppingImagesExample01Component {
  @ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
  myConfig: LyResizingCroppingImagesConfig = {
    width: 150, // Default `250`
    height: 150 // Default `200`
  };

  constructor() { }

  crop() {
    const imgCropped: CroppedImage = this.img.crop(); // return img cropped
  }
}
<div>
  <input #_fileInput type="file" (change)="cropping.selectInputEvent($event)" accept="image/*">
</div>
<div class="resize-image">
  <ly-cropping #cropping
  [config]="myConfig">
    <span>Drag and drop image</span>
  </ly-cropping>
  <button *ngIf="cropping.isLoaded" (click)="crop()">crop</button>
</div>
<img *ngIf="cropping.isCropped" [src]="cropping.result">