Error: [ng:areq] Argument 'module' is not a function, got Object

Question

I try to use angular uploader which download it using npm and later browserify it all in single file. The error details can be seen here

I cannot understand the errors because now I'm still new to AngularJS. Here is my code

var angular = require('angular');
angular
    .module('jobApp', [require('angular-material'), require('ng-file-upload')])
    .controller('MainCtrl', ['$rootScope', '$scope', '$mdToast', '$animate', '$http', '$timeout', '$q', '$log', 'Upload',
        function($rootScope, $scope, $mdToast, $animate, $http, $timeout, $q, $log, Upload) {
        'use strict';
        // Initialize the scope variables
        $scope.$watch('files', function () {
            $scope.upload($scope.files);
        });
        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    Upload.upload({
                        url: 'http://sr-recruit.herokuapp.com/resumes',
                        fields: {
                            'name': $scope.name,
                            'email': $scope.email,
                            'about': $scope.about
                        },
                        file: file
                    }).progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        $scope.log = 'progress: ' + progressPercentage + '% ' +
                                    evt.config.file.name + '\n' + $scope.log;
                    }).success(function (data, status, headers, config) {
                        $scope.log = 'file ' + config.file.name + 'uploaded. Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                        $scope.$apply();
                    });
                }
            }
        };
    }]);

UPDATE

Now am using Browserify-shim to properly enclosed the Angular-file-upload in Commonjs format. Thanks to @ryan Johnson.

Here is the package.json

{
    "browser": {
        "angular": "./node_modules/angular/angular.js",
        "ng-file-upload": "./node_modules/ng-file-upload/dist/ng-file-upload-all.js"
    },
    "browserify-shim": {
        "angular": {
            "exports": "angular"
        },      
        "ng-file-upload": {
            "exports": "angular.module('ngFileUpload').name"
        }
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    }
}

I still the error

TypeError: Cannot read property '' of undefined

Not sure why. FYI I use Laravel-elixir built in browserify to run the task.

The *requires* array (2nd arg to `module`) should be an array of strings — Phil, Jun 12 '15 at 03:32
what do you mean? `.module('jobApp', [require('angular-material'), require('ng-file-upload')])` ? — Muhaimin, Jun 12 '15 at 03:38
It should be `.module('jobApp', ['ngMaterial', 'ngFileUpload'])`. I'm not sure what the node module versions of those export but I bet it's not a string (just checked ng-file-upload and it has no module export) — Phil, Jun 12 '15 at 03:40
Ok, assuming that actually works, you should only have one array, not two. Ie, you have `[require('angular-material')], [require('ng-file-upload')]` where it should be `[require('angular-material'), require('ng-file-upload')]` — Phil, Jun 12 '15 at 03:43

score 19 · Answer 1 · answered Jun 12 '15 at 03:44

19

I noticed that you are using require('ng-file-upload') to include the module. Even though the ng-file-upload module is available through npm the downloaded JS files are not in commonJS format.

In order for the require('ng-file-upload') to work in your example the source file would need to export the module like so:

module.exports = angular.module('ng-file-upload').name;

Since this is not the case for the file you are including you need to shim it to work with Browserify. Here is a good article on Properly shim AngularJS applications using Browserify.

answered Jun 12 '15 at 03:44

ryandrewjohnson

555
3
7

FYI, I use laravel-elixir-browserify function. because I thought it will automatically browserify it too. I use npm to manage the angularjs and I dont find it has problem to browserify it – Muhaimin Jun 12 '15 at 03:47
@MuhaiminAbdul that's because the angular node modules have `index.js` files with things like `module.exports = 'ngMaterial'` – Phil Jun 12 '15 at 03:48
I have try to shim it but no luck because it turn out to be other error `TypeError: Cannot read property '' of undefined` – Muhaimin Jun 13 '15 at 03:04
@MuhaiminAbdul shimming can be tricky with browserify. If we could see your shim setup in your package.json and the browserify config for your task runner (gulp/grunt) that might help. – ryandrewjohnson Jun 13 '15 at 03:17

Error: [ng:areq] Argument 'module' is not a function, got Object

1 Answers1