Required Browserify ('restangular') returns an empty object

Question

Im facing a problem when I try to use browser, angularjs and restangular.

When I try to require an npm or bower module, for example require ('restangular), browsers return an empty object. This happens when I need bower or npm modules. When I try to use any local file, everything works fine.

File structure:

bower_components/ src/ -client -app app.js backend backend.module.js -test test.module.ls test.js node_modules/ 

app.js

 (function() { 'use strict'; require('angular'); var rest = require('restangular'); console.log(rest); module.exports = angular .module('app', [ require('restangular').name, require('./test/test.module').name, ]); })(); 

package.json

 "browserify": { "transform": [ "browserify-shim" ] }, "browser": { "restangular": "./bower_components/restangular/dist/restangular.js" }, "browserify-shim": { "restangular": "restangular" } 

gulpfile.js

 gulp.task('browserify', function() { gulp.src(['./src/client/app/app.js']) .pipe(plugins.browserify({ insertGlobals: true, debug: true })) .pipe(plugins.concat('bundled.js')) .pipe(gulp.dest('./src/client/js')) }); 

Can you help me? Thanks in advance.

Answer 1

Just change your "browser" part in package.json:

 "browserify-shim": { "angular": { "exports": "angular" }, "restangular": { "depends": [ "angular" ], "exports": "restangular" } } 

Hope this works.

Answer 2

Try modifying the package.json file with this snippet.

 "browser": { "restangular": "./bower_components/restangular/dist/restangular.js" }, "browserify-shim": { "restangular": { "depends": [ "angular", "lodash:_" ], "exports": "null" } } 

Solution provided by @newtricks from this discussion