'angular' is undefined when loaded with requirejs

[swlasse]

The context is the first lines of the script related to the module definition:

(function(angular, factory) {
    if (typeof define === 'function' && define.amd) {
        define('angular-file-upload', ['angular'], function(angular) {
            return factory(angular);
        });
    } else {
        return factory(angular);
    }
}(angular || null, function(angular) {

If you load "angular-file-upload" with an AMD such as requirejs, and you don't manually set angular as a dependency using a shim in your requirejs configuration, then the initialization of "angular-file-upload" fails, since angular is undefined - in particular, the browser (Chrome 35) throws the following exception at you:

Uncaught ReferenceError: angular is not defined angular-file-upload.js:13

Aside from applying the shim in my own code 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"
        },
        // Currently needed
        "angular-file-upload": ["angular"]
    }
})

A working fix for angular-file-upload is to change:

(angular || null, function(angular)

to:

(window.angular, function(angular)

... but I have a feeling there is a prettier solution to this.

However, if I do this, then I don't need to manually set angular as a dependency in my requirejs configuration - and I can start using the module defined in angular-file-upload instead (which then makes sure to resolve angular correct when loaded).

Aside from that - thanks for a great library - good job :)

Update:

Maybe the suggested fix is not that bad at all: http://stackoverflow.com/a/13469729/700926

[sirbarrence]

Looks like you may have merged the commit where I included an extra || null on the end by accident. See 16b8a22 . I tried to update the pull request, but apparently it didn't show up on this issue.

[swlasse]

Thanks for taking a look at this guys - yeah, I saw that as well @sirbarrence - are you going to remove that extra || null @nervgh or would it be easier if we raise another PR?

[nervgh]

@nervgh or would it be easier if we raise another PR?

it will be great =)

I found a issue trying to use angularFileUpload in my app.
I explain:
I'm using requirejs but without configurations..I'm just using it inside route resolve function to async load the deps..
like so:

    var deferred = $q.defer();
    require($route.current.$$route.dependencies, function () {
        $rootScope.$apply(function () {
            deferred.resolve();
        });
    }, function(){
        deferred.reject();
    });
    return deferred.promise;

In my index.html file I got:

<script src="assets/js/require.js"></script>
<script src="https://code.angularjs.org/1.3.16/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="assets/js/angular-file-upload.min.js"></script>

When I add the module to my app:

var app = angular.module('app', [
  // other modules
  'angularFileUpload'
]);

the error is Uncaught Error: [$injector:modulerr]
I looked into the source code and I saw

if (typeof define === 'function' && define.amd) {
  define('angular-file-upload', ['angular'], function(angular) {
      return factory(angular);
  });
} else {
  return factory(angular);
}

when i saw "define('angular-file-upload') i tried to remove the script calling src="assets/js/require.js" and it "fixed" the error..
but I need to use it.. I don't know if is angular trying to load angularFileUpload before it's loaded itself or is a requirejs problem..

I don't want to modify the angular-file-upload.js source code
any ideas? thx