Empty object require angular browserify

Question

I m facing a problem when I try to use bowserify, angularjs and coffeescript.

In fact, when I try to require('angular'), I get an empty object :

angular = require('angular')
console.log angular ## return an empty object {}

configuration = require('../../config/config') 
console.log configuration ## returns my fully config file correctly

I dont know why it doesn't work properly in this case :-/. This is my package.json where I put the my personnal angular dependencies :

{
    "dependencies": {
        "gulp": "*",
        "gulp-browserify": "*",
        "coffeeify": "*",
        "gulp-concat": "*"
    },
    "browser": {
        "angular": "./app/core/angular-libs/angular.min.js",
        "angular-route": "./app/core/angular-libs/angular-route.min.js",
        "angular-animate": "./app/core/angular-libs/angular-animate.min.js"
    }
}

And this is my gulp file, that generates my bundle.js in dest folder :

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');

gulp.task('scripts', function () {
    return gulp.src('app/**/*.coffee', { read: false })
        .pipe(browserify({ transform: ['coffeeify'], extensions: ['.coffee'] }))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('./dest/'));
});

gulp.task('default', function () {
    gulp.run('scripts');
});

Can you help me ? :-/

Thanks for advance

Answer 1

Angular 1 doesn't support CommonJS modules, so it 'exports' an empty object.

Instead, just require it (without assigning the result):

require('angular')

This will attach angular to the global object.

UPDATE: As of Angular 1.3.14, require('angular') now returns the angular object.

Answer 2

You could also try browserify-shim to link the angular object to module.exports.

npm install -save-dev browserify-shim

I managed to get angular working with the following configuration in package.json:

{
    "browser": {
        "angular": "./node_modules/angular/angular.js"
    },
    "browserify-shim": {
        "angular": "angular"
    },
    "browserify": {
        "transform": [ "browserify-shim" ]
    }
}

This gets around the issue of making angular a global object, also. It (the angular variable) may stay an object stored in a global variable of the same name, but the reference will always be correct if someone overwrites the global variable.