Comments (7)
cstefanache
commented on August 14, 2024
1
Working on the problem right now!
from angular2-img-cropper.
cstefanache
commented on August 14, 2024
1
Glad that I could help. Please post more issues/improvements if any
from angular2-img-cropper.
cstefanache
commented on August 14, 2024
I did a test project and manage to make it work with no changes.
component.ts:
import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';
src/system-config.ts
- add to barrels: 'ng2-img-cropper'
- add tot System.config (map): 'ng2-img-cropper': 'vendor/ng2-img-cropper'
angular-cli-build.js
- add to vendorNpmFiles: 'ng2-img-cropper/*/.+(js|js.map)',
from angular2-img-cropper.
reingroot
commented on August 14, 2024
I implemented the steps as you describe. With one addition, because else the file was not found by the browser:
const packages: any = {
'ng2-img-cropper': { defaultExtension: 'js', main: 'src/imageCropper' }
};
However, now I'm getting the following error. Again, if this is something at my side, sorry for bothering you :)
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: ng2_img_cropper_1.CropperSettings is not a constructor
ORIGINAL STACKTRACE:
TypeError: ng2_img_cropper_1.CropperSettings is not a constructor
at new CreateAccountComponent (http://localhost:4200/app/+account/+create-account/create-account.component.js:83:32)
at DebugAppView._View_CreateAccountComponent_Host0.createInternal (CreateAccountComponent_Host.template.js:15:38)
at DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:66:21)
at DebugAppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:259:44)
at ComponentFactory.create (http://localhost:4200/vendor/@angular/core/src/linker/component_factory.js:143:36)
at ViewContainerRef_.createComponent (http://localhost:4200/vendor/@angular/core/src/linker/view_container_ref.js:108:45)
at RouterOutlet.load (http://localhost:4200/vendor/@angular/router/src/directives/router_outlet.js:37:39)
at _LoadSegments.loadNewSegment (http://localhost:4200/vendor/@angular/router/src/router.js:244:26)
at _LoadSegments.loadSegments (http://localhost:4200/vendor/@angular/router/src/router.js:237:44)
at eval (http://localhost:4200/vendor/@angular/router/src/router.js:221:19)
at Array.forEach (native)
at _LoadSegments.loadChildSegments (http://localhost:4200/vendor/@angular/router/src/router.js:220:27)
at _LoadSegments.loadSegments (http://localhost:4200/vendor/@angular/router/src/router.js:238:22)
at eval (http://localhost:4200/vendor/@angular/router/src/router.js:221:19)
at Array.forEach (native)
at _LoadSegments.loadChildSegments (http://localhost:4200/vendor/@angular/router/src/router.js:220:27)
at eval (http://localhost:4200/vendor/@angular/router/src/router.js:181:23)
at ZoneDelegate.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:323:29)
at Object.onInvoke (http://localhost:4200/vendor/@angular/core/src/zone/ng_zone_impl.js:45:41)
at ZoneDelegate.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:322:35)
at Zone.run (http://localhost:4200/vendor/zone.js/dist/zone.js:216:44)
at http://localhost:4200/vendor/zone.js/dist/zone.js:571:58
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Object.onInvokeTask (http://localhost:4200/vendor/@angular/core/src/zone/ng_zone_impl.js:36:41)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:355:43)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at drainMicroTaskQueue (http://localhost:4200/vendor/zone.js/dist/zone.js:474:36)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:426:22)
ERROR CONTEXT:
[object Object]
I'm implementing the component as follows:
avatar: any;
cropperSettings: CropperSettings;
constructor(
private _blockWhileLoadingService:BlockWhileLoadingService,
private _location: Location,
private _router: Router,
private accountService: AccountService,
private authService: AuthService
) {
this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 100;
this.cropperSettings.height = 100;
this.cropperSettings.croppedWidth =100;
this.cropperSettings.croppedHeight = 100;
this.cropperSettings.canvasWidth = 600;
this.cropperSettings.canvasHeight = 450;
this.avatar = {};
}
from angular2-img-cropper.
reingroot
commented on August 14, 2024
Wait, while debugging this it seems 'CropperSettings' is actually 'undefined' at this point. Let me check what's going on.
from angular2-img-cropper.
cstefanache
commented on August 14, 2024
CropperSettings were extracted to a separate file in the last version. Please check if the file is correctly imported. import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';
from angular2-img-cropper.
reingroot
commented on August 14, 2024
Fixed!
The import is done correctly.
However, in the system-config.js I changed the main file to be the index (instead of src/imageCropper):
const packages: any = {
'angular2-infinite-scroll': { defaultExtension: 'js', main: 'bundles/angular2-infinite-scroll' },
'ng2-img-cropper': { defaultExtension: 'js', main: 'index' }
};
Now the compiler finds and packages all separate modules correctly and the component works!
And the angular-cli-build.js I have modified as such: 'ng2-img-cropper/**/*.+(js|js.map)', (//. instead of //.)
Thanks for your patience and fast replies!
from angular2-img-cropper.
Related Issues (20)
- How to get cropped image in ts file with a specified with and height HOT 7
- How to upload the image on click canvas area instead of speared upload button HOT 6
- How to enable the backdrop while cropping the image HOT 1
- Loading Indicator HOT 1
- Release update to NPM HOT 6
- cropperSettings.minWidth and cropperSettings.minHeight not working
- Remove Drag Center
- Cropper won't Compile AoT HOT 4
- Image Crop Image not Display in Model Popup HOT 1
- 'l']]]]]]]\
- Angular 6 compatibility HOT 1
- this.cropperSettings.rounded = true ; - don't work
- Image cropper is not working with PNG image format HOT 1
- Please add version tags to the repository
- .
- Cropper doesn't produce a rounded cropper image
- support upload base64 image with progress bar after cropper image?
- Unable to add custom values in onCrop method
- Export declare abstract class Renderer2
- loading an image in the ngx image cropper
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-img-cropper.