I’ve been getting a few questions on how to go about adding external/custom modules to a MEAN Stack app.

If the module is vanilla JavaScript, it’ll need some additional work to create one or more directives, but assuming you have an Angular module, such as one from this site: http://ngmodules.org/, then the process is fairly straight forward. Do also read the read-me file for any specific instructions for the module that you’ve selected to use.

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'];

3. Add a reference to the javaScript file for the module, to the app:
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!

Add an AngularJS module to your MEAN Stack App