Browserify overrides its own configuration when browsing a folder that contains a package.json?

Question

I've created a simple JavaScript application using AngularJS.

I'm using npm and Bower to manage my dependencies, Gulp to automatise my tasks and I want to use the CommonJS' module.exports/require() to tie everything up together: I decided to go for Browserify to bundle this all up.

There's my very empty and clean project on Github, if you wanna take a look.

---

In order to be able to require('angular'), I configured Browserify to shim that AngularJS into the available modules, using browserify-shim. Pretty straightforward, here's the relevant part of my package.json:

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

It's pretty neat, my main JS file now looks like this:

'use strict';

var angular = require('angular');

angular.module('MyApp', [])
  .controller('View1Ctrl', ['$scope', require('./view1/view1.js')])
  .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]);

And that works.

---

Now, I'm trying to get into some more advanced stuff, using external libraries available through Bower. They get installed under bower_components and look -well- just like my project, they've got a package.json, a bower.json and all.

Take for example ng-dialog, which also require('angular'). Once retrieved via bower install ng-dialog --save, I do two things:

1. Link their dist's JS file to a keyword (let's say ng-dialog) in my package.json
2. require('ng-dialog') in main main JS file in order to have my Angular module depend on theirs.

Here's the updated relevant part of my package.json (note that ng-dialog does not need to be shimmed):

"browser": {
  "angular": "./bower_components/angular/angular.min.js",
  "ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "angular": {
    "exports": "angular"
  }
}

... and my updated app.js file:

'use strict';

var angular = require('angular');
require('ng-dialog');

angular.module('MyApp', ['ngDialog'])
  .controller('View1Ctrl', ['$scope', require('./view1/view1.js')])
  .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]);

I get the following error while Browserify-ing this up:

Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js'

After a good half hour of tweaking around, it turned out that SIMPLY deleting the package.json file from bower_components/ng-dialog makes it all go smoothly.

What is going on and how the hell should I bundle that ngDialog.min.js?

Answer 1

As stated in the Browserify Handbook

The module system that browserify uses is the same as node, so packages published to npm that were originally intended for use in node but not browsers will work just fine in the browser too.

Increasingly, people are publishing modules to npm which are intentionally designed to work in both node and in the browser using browserify and many packages on npm are intended for use in just the browser. npm is for all javascript, front or backend alike.

Therefore use the npm distribution of Angular and ngDialog packages rather than the bower ones

npm install angular ng-dialog --save

This will do away with the need to do the whole configuration in package.json and simply calling require() in the project will make browserify work.

When we require any node module in the project, browserify bundles the file present in the main field of the package.json of that respective node module. Currently as ngDialog's main field references the ngDialog.js file , therefore you will need to change it to ngDialog.min.js so that browserify bundles that file. (This isn't a major issue as you compress your browserify bundle using gulp-uglify)

I have forked your code and done the necessary changes in it - Check them here https://github.com/pra85/angular-seed