I’ve been getting a few questions on how to go about adding external/custom modules to a MEAN Stack app.
Okay, so you’ve found a module that you like, lets add it in. A recent question that I got was about ng-flow, so I’ll use that as the example.
To add a new module, just do the following:
1. If the package is available in bower, then do
'bower install '[package-name]' --save'
This will install the package and save it to your bower.json file
If the package is not available in bower or npm, then I actually suggest downloading it and adding it in your Public/Modules directory, rather than Public/Lib. This is to make sure that the files are added to git, and available to your app when you push it up to your web host. Or alternatively, change up your .gitignore file to include the new package.
2. If it’s an Angular Module, chances are that it would have a readme file, this is useful to know the module dependency reference/name. I had a quick look at ng-flow, and you’ll need to add the ‘flow’ module as below:
Find the Public > config.js file and add to line 7:
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'flow'];
Find Config > Env > all.js & production.js
e.g. in all.js, you would add:
js: [ 'public/lib/angular/angular.js', 'public/lib/angular-resource/angular-resource.js', 'public/lib/angular-cookies/angular-cookies.js', 'public/lib/angular-animate/angular-animate.js', 'public/lib/angular-touch/angular-touch.js', 'public/lib/angular-sanitize/angular-sanitize.js', 'public/lib/angular-ui-router/release/angular-ui-router.js', 'public/lib/angular-ui-utils/ui-utils.js', 'public/lib/angular-bootstrap/ui-bootstrap-tpls.js', '[the route to the file]/ng-flow-standalone.js' ]
Lastly, add the minified version to the production.js file, in a similar way to the all.js file.
Once you’ve done all these steps, be sure to reboot the server.
Hope this helps!