AngularJS RequireJS loading angular-file-upload

Question

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']);
    });
  }
);

Lasse Christiansen · Accepted Answer · 2014-07-09 20:51:51Z

2

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.

answered Jul 9, 2014 at 20:51

Lasse Christiansen

10.4k7 gold badges52 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swanidhi Over a year ago

I was also stuck with a similar issue where 'angular is undefined' was thrown. I changed the shim for angular to exports and it worked. Can you explain what this does, and why just "angular.file.upload": ["angular"] wont work? "angular": { exports: "angular" }

BenCr · Accepted Answer · 2014-03-31 23:29:02Z

0

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

answered Mar 31, 2014 at 23:29

BenCr

6,0525 gold badges47 silver badges70 bronze badges

2 Comments

Nate Over a year ago

You may not have helped @Frank6, but you helped me. Thanks!

Frank6 Over a year ago

I would love to know how it was helpfull ?

Collectives™ on Stack Overflow

AngularJS RequireJS loading angular-file-upload

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related