cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

issues with private variables and AOT compiling #89

Closed lbickston closed 7 years ago

lbickston commented 8 years ago

I am using angular2-img-cropper with ionic2, which uses AOT compilation when building for a mobile device. Here there are a few issues that can easily be solved by changing private/protected variables to public.

[12:19:03] Error: Error at /Users/l/Dev/h3/.tmp/node_modules/ng2-img-cropper/src/imageCropperComponent.ngfactory.ts:99:18 [12:19:03] Property 'cropcanvas' is private and only accessible within class 'ImageCropperComponent'. [12:19:03] Error at /Users/l/Dev/h3/.tmp/node_modules/ng2-img-cropper/src/imageCropperComponent.ngfactory.ts:129:45 [12:19:03] Property 'settings' is private and only accessible within class 'ImageCropperComponent'. [12:19:03] Error at /Users/l/Dev/h3/.tmp/node_modules/ng2-img-cropper/src/imageCropperComponent.ngfactory.ts:139:29 [12:19:03] Supplied parameters do not match any signature of call target. [12:19:03] Error at /Users/l/Dev/h3/.tmp/node_modules/ng2-img-cropper/src/imageCropperComponent.ngfactory.ts:144:29 [12:19:03] Supplied parameters do not match any signature of call target. [12:19:03] Error at /Users/l/Dev/h3/.tmp/node_modules/ng2-img-cropper/src/imageCropperComponent.ngfactory.ts:154:29 [12:19:03] Supplied parameters do not match any signature of call target. [12:19:03] Error at /Users/l/Dev/h3/.tmp/pages/crop-modal/crop-modal.ngfactory.ts:229:40 [12:19:03] Property 'settings' is private and only accessible within class 'ImageCropperComponent'. [12:19:03] Error at /Users/l/Dev/h3/.tmp/pages/crop-modal/crop-modal.ngfactory.ts:234:40 [12:19:03] Property 'image' is private and only accessible within class 'ImageCropperComponent'. [12:19:03] ngc failed [12:19:03] ionic-app-script task: "build" [12:19:03] Error: Error

See these angular2 issues for more context: https://github.com/angular/angular/issues/11978 https://github.com/angular/angular/issues/11422

ghost commented 8 years ago

I'm getting this too

agates commented 7 years ago

As a workaround I've added ImageCropperModule to my AppModule imports (I'm using Ionic 2):

imports: [ ImageCropperModule, IonicModule.forRoot(MyApp) ],

It wasn't an issue with Typescript 2.1, but I had to downgrade to Typescript 2.0.10 for proper AoT support in Ionic.

Loving this plugin by the way... it does everything we need!

cstefanache commented 7 years ago

Closing - link AOT issue was solved

megasharks commented 7 years ago

Thanks for a great component! It took me a lot of time figure out how to compile AOT (Angular 4) . Found the hint in a https://github.com/cstefanache/angular2-img-cropper/issues/95.

It might be useful to document the steps.

  1. in appModule.ts (main module) import {ImageCropperModule} from 'ng2-img-cropper'; add to the imports: [ImageCropperModule] (same module)

  2. In a user-profile.component.ts (where the initiation and logic goes) import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-cropper';

and finally enjoying:)