Once upon a time, I needed to use jqFileUPload plugin (actually modified version which provides Angular’s directive around native jqFileUpload plugin).
In the same time, my Angular-base project was configured to be used together with RequireJS.
I spend few ours trying to figure out what I was doing wrong — why I was getting errors in my browser’s console.
Those errors were about something weird… Something in `load-image-exif` and `load-image` files.
My require.js main config file looked like this:
require.config({
paths: {
'semantic': '../../bower_components/semantic-ui/build/packaged/javascript/semantic.min',
'jquery': '../../bower_components/jquery/dist/jquery.min',
'domReady': '../../bower_components/requirejs-domready/domReady',
'angular': '../../bower_components/angular/angular.min',
'angular-route': '../../bower_components/angular-route/angular-route.min',
'angular-resource': '../../bower_components/angular-resource/angular-resource.min',
'jquery.fileupload': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload',
'jquery.fileupload-angular': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-angular',
'jquery.ui.widget': '../../bower_components/angular-jqfile-upload/js/vendor/jquery.ui.widget',
'jquery.fileupload-image': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-image',
'jquery.fileupload-process': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-process',
'jquery.fileupload-audio': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-audio',
'jquery.fileupload-video': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-video',
'jquery.fileupload-validate': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-validate',
'jquery.fileupload-ui': '../../bower_components/angular-jqfile-upload/js/jquery.fileupload-ui',
'jquery.iframe-transport': '../../bower_components/angular-jqfile-upload/js/jquery.iframe-transport',
'canvas-to-blob': '../../bower_components/blueimp-canvas-to-blob/js/canvas-to-blob.min',
'load-image': '../../bower_components/blueimp-load-image/js/load-image.min',
'load-image-exif': '../../bower_components/blueimp-load-image/js/load-image-exif',
'load-image-ios': '../../bower_components/blueimp-load-image/js/load-image-ios',
'load-image-meta': '../../bower_components/blueimp-load-image/js/load-image-meta',
'load-image-orientation': '../../bower_components/blueimp-load-image/js/load-image-orientation'
},
// angular does not support AMD out of the box, put it in shim
shim: {
'semantic': {
exports: 'semantic',
deps: ['jquery']
},
'angular': {
exports: 'angular'
}
},
// kick start application
deps: ['./bootstrap']
});
Those errors made me crazy so I even decided to get rid of using RequireJS with Angular app at all!
Next day, I decided Google for a bit and I was extremly lucky to get to this answer — http://stackoverflow.com/a/20734214.
No votes for it, but that is correct answer and helps resolve the issue.
To recall here, the reason is — I used minified version of `load-image` script, which includes all dependencies in it…
So, all I had to do is replace this line with a path to not minified version:
.....
'load-image': '../../bower_components/blueimp-load-image/js/load-image.min',
.....
After had that done everything started up.