Angular-new-router not found with browserify

Question

I am setting up an angular project with browserify.

I have a gulp task that take all vendor modules from bower_components directory and put them in a bundle:

gulp.task('dependencies', function () {
    return browserify({
        entries: [dependencies.js],
    })
        .transform(debowerify)
        .bundle()
        .pipe(source(config.filenames.release.dep))
        //.pipe(streamify(uglify()))
        .pipe(gulpif(release,
            gulp.dest(config.paths.dest.release.scripts),
            gulp.dest(config.paths.dest.build.scripts)));

The dependencies.js file contains this code:

'use strict';

// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-ui-router');

Everything works fine. Now I try to change the ui-router with angular-new-router.

My new dependencies.js (My gulp task doesn't change):

'use strict';

// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-new-router');

And for information here's my bower.json file:

{
  "name": "test",
  "private": true,
  "dependencies": {
    "angular": "~1.4.x",
    "angular-new-router": "*",
    "angular-ui-router": "*"
  }
}

With this new config browserify return a weird error:

: Cannot find module './....\bower_components\angular-new-router\angular-new-router.js' from 'D:\Devs\sharefun\WebApplication2\src\WebApplication2\client\modules' at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:55:21 at load (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:69:43) at onex (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:92:31) at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:22:47 at Object.oncomplete (fs.js:107:15)

What I find weird is that browserify is looking for bower_components\angular-new-router\angular-new-router.js instead of bower_components\angular-new-router\index.js

Answer 1

you kind of have the answer, specify full path to index.js. try

require(angular-new-router/index.js);

or

import 'angular-new-router/index.js'; for ES6

to anyone who is having this problem now it might be useful to know that new router package is not updated anymore but you can get it from angular project. the latest example working with angular 1.5, components() and child routes can be found here: http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview