Having error while trying use jqFileUpload with RequireJS?

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<span style="text-decoration: line-through;">.min</span>',
    .....

After had that done everything started up.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *