current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am having a hard time with loading the angular-file-upload module to my application. I've been reading all sort of tutorial, example, questionc, etc. Can you guys help me figuring out what I am doing wrong here?

I get the following error message : Failed to instantiate module angular-file-upload

Here is my code

mymodule/module.js

define(['angular', 'angular.file.upload'], function (angular) {
'use strict';
    return angular.module('app.mymodule', ['angularFileUpload']);
});

mymodule/index.js

define([
'./routes',
'./models/index',
'./controllers/index',
'./directives/index'
], function () {});

app.js

define([
    'angular', 
    'angular.resource', 
    'angular.ui.bootstrap', 
    'angular.ui.router', 
    './relation/index', 
    './controllers/index', 
    './directives/index', 
    'config'
], function (angular) {
    'use strict';    
    return angular.module('app', [
        'ngResource',
        'ui.bootstrap',
        'ui.router',
        'app.relation',
        'app.controllers',
        'app.directives',
        'app.constants'
    ]);
});

main.js

require.config({
    paths: {
        'angular': '../lib/angular/angular',
        'angular.route': '../lib/angular-route/angular-route',
        'angular.resource': '../lib/angular-resource/angular-resource',
        'angular.ui.bootstrap': '../lib/angular-bootstrap/ui-bootstrap-tpls',
        'angular.ui.router': '../lib/angular-ui-router/angular-ui-router',
        'angular.file.upload': '../lib/angular-file-upload/angular-file-upload',
        ...
    },

    shim: {
        'angular': {'exports': 'angular'},  
        'angular.resource': ['angular'],
        'angular.ui.bootstrap': ['angular'],
        'angular.ui.router': ['angular'],
        'sails.io' : ['socket.io']
    }
});

require([
  'angular',
  'app',
  'config',
  'routes'
], function(angular) {
    'use strict';

    angular.element().ready(function() {
      angular.bootstrap(document, ['app']);
    });
  }
);
share|improve this question

2 Answers 2

up vote 2 down vote accepted

If you take a look at the source code for angular-file-upload you can see that it does not register itself as an AMD module, meaning that we have to provide a shim that makes sure that all of its dependencies are loaded before we load angular-file-upload itself.

The main dependency is of course angular - so we need to setup a shim to make sure that angular is loaded before angular-file-upload. In your case, I guess the requirejs config should look something like this:

require.config({
    paths: {
        "angular"             : "relative/path/to/angular",
        "angular.file.upload" : "relative/path/to/angular-file-upload",
        ... other modules
    },
    shim: {
        "angular": {
            exports: "angular"
        },
        "angular.file.upload": ["angular"]
    }
})

Then you should be ready to rock.

share|improve this answer
up vote 0 down vote

If it's the same library I use you probably want to inject angularFileUpload and not angular-file-upload.

share|improve this answer
    
I tried but without success –  Frank6 Mar 31 at 23:43
    
You may not have helped @Frank6, but you helped me. Thanks! –  Nate May 25 at 0:20
1  
I would love to know how it was helpfull ? –  Frank6 May 26 at 1:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.