Not able to add new modules to AngularJs Boilerplate

Question

I am working on an angular project and have decided to use a boilerplate for it. Here is the link to the boilerplate: https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate

The problem i am facing is that i am unable to add any new moudle.

e.g i wanted to add ngCart via npm. I have installed it but it is not accessible in the code.

`import angular from 'angular';

// angular modules
import constants from './constants';
import onConfig  from './on_config';
import onRun     from './on_run';
import 'angular-ui-router';
import 'ngCart'; //this doesn't import it
import './templates';
import './filters';
import './controllers';
import './services';
import './directives';

// create and bootstrap application
const requires = [
  'ui.router',
  'ngCart',
  'templates',
  'app.filters',
  'app.controllers',
  'app.services',
  'app.directives'
];

// mount on window for testing
window.app = angular.module('app', requires);

angular.module('app').constant('AppSettings', constants);

angular.module('app').config(onConfig);

angular.module('app').run(onRun);

angular.bootstrap(document, ['app'], {
  strictDi: true
});

My package.json is

{
  "name": "angularjs-gulp-browserify-boilerplate",
  "version": "1.7.1",
  "author": "Jake Marsh <[email protected]>",
  "description": "Boilerplate using AngularJS, SASS, Gulp, and Browserify while also utilizing best practices.",
  "repository": {
    "type": "git",
    "url": "https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate.git"
  },
  "license": "MIT",
  "keywords": [
    "express",
    "gulp",
    "browserify",
    "angular",
    "sass",
    "karma",
    "jasmine",
    "protractor",
    "boilerplate"
  ],
  "private": false,
  "engines": {
    "node": "~4.2.x"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development ./node_modules/.bin/gulp dev",
    "build": "cross-env NODE_ENV=production ./node_modules/.bin/gulp prod",
    "deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp deploy",
    "test": "cross-env NODE_ENV=test ./node_modules/.bin/gulp test",
    "protractor": "cross-env NODE_ENV=test ./node_modules/.bin/gulp protractor",
    "unit": "cross-env NODE_ENV=test ./node_modules/.bin/gulp unit"
  },
  "dependencies": {
    "cross-env": "^3.1.1",
    "ngCart": "1.0.0"
  },
  "devDependencies": {
    "angular": "^1.5.0",
    "angular-mocks": "^1.3.15",
    "angular-ui-router": "^0.3.1",
    "babel-core": "^6.3.26",
    "babel-eslint": "^7.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-register": "^6.5.2",
    "babelify": "^7.2.0",
    "brfs": "^1.2.0",
    "browser-sync": "^2.7.6",
    "browserify": "^13.0.0",
    "browserify-istanbul": "^2.0.0",
    "browserify-ngannotate": "^2.0.0",
    "bulk-require": "^1.0.0",
    "bulkify": "^1.1.1",
    "debowerify": "^1.3.1",
    "del": "^2.1.0",
    "envify": "^3.4.0",
    "ngCart": "^1.0.0",
    "eslint": "3.7.1",
    "express": "^4.13.3",
    "gulp": "^3.9.0",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-changed": "^1.0.0",
    "gulp-eslint": "^3.0.1",
    "gulp-gzip": "^1.2.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-notify": "^2.0.0",
    "gulp-protractor": "^3.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^2.0.4",
    "gulp-sass-glob": "^1.0.6",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-streamify": "^1.0.2",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.1",
    "imagemin-pngcrush": "^5.0.0",
    "isparta": "^4.0.0",
    "karma": "^1.3.0",
    "karma-browserify": "^5.0.2",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "douglasduteil/karma-coverage#next",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sauce-launcher": "^1.0.0",
    "merge-stream": "^1.0.0",
    "pretty-hrtime": "^1.0.1",
    "run-sequence": "^1.1.5",
    "tiny-lr": "^0.2.1",
    "uglifyify": "^3.0.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  }
}

Answer 1

ngCart does not have a main key in its package.json, nor an index.js at its root, so import can not know what to import. So you need to be a little more explicit in your import statement.

try to replace

import 'ngCart'; //this doesn't import it

by

import 'ngCart/dist/ngCart'; //this should do it ;)