How To Uglify AngluarJS Using Grunt

I ran in to some bumps while trying to deploy an AngularJS app to heroku using grunt. The goal was to minify both css and javascript. I eventually discovered that AngularJS breaks when you try to concat and uglify it. However, the first obstacle I had to overcome was how to get heroku to install bower components during deployments.

Fortunately there are good resources out there and I was able to come across pretty solid examples. The first thing you are going to want to do is to do a bower install for your package.json Just copy and paste the line below into your terminal.

npm bower install –save-dev

Next you are going to want to add scripts to your package.json to indicate that heroku will be performing a post bower install. Just copy the example below and paste it into your package.json file.

“scripts”: {
“start”: “node server/server.js”,
“postinstall”: “./node_modules/bower/bin/bower install”

After this is in place you will then need to specify the location of where you want your bower components to install once it is deployed. You can specify this inside of the .bowerrc file. In my case I needed it to be installed in client. Just be sure to indicate the correct file path that you need.

“directory”: “client/bower_components”

All of the above will take care of enabling herkou to install bower components during deployments. The next step is working with minifying AngularJS. Interestingly enough if you try to concat and uglify AngluarJS the way you would with a normal javascript file, it will cause it to break. Two solutions that I have found is to, one make sure you use inline annotation when writing out your AngularJS functions. Or you can use ng-annotate a grunt plugin. This plugin will concat your AngluarJS files and will keep them from breaking when you uglify them. Simply do a npm install.

npm install grunt-ng-annotate –save-dev

Then in your Gruntfile.js file write out all of the file paths for AngularJS that you need to run through ng-annotate. My example is posted below.

ngAnnotate: {
demo: {
files: {
[‘client/app.js’, ‘client/main/main.js’,

This file path ‘client/dist/WithAnnotationsCtrl.js’ represents the file path that you will be sending your annotated files to. After this, you then add it to uglify, like the below example. This is still within the Gruntfile.js of course.

uglify: {
js: {

Do not forget to include the following in your Gruntfile.js in order to enable the ngAnnotate:


Then finally be sure to add ngAnnotate to your build task.

grunt.registerTask(‘build’, [

The final step is to make sure you point your index.html at your new minified AngularJS (also be sure to point your index.html towards any other javascript file or css file that you may have minified). Be sure to comment out all AngularJS files that have been minified, they will not be needed since they are now all loaded into one file now.

<– The below is an example of the files I can comment out in my index.html, because they are all included in the minified version –>
<!– http://login/signup.js
http://main/main.js –>

A final note here is to check your .gitignore file. Be sure not to include bower_components or /dist in .gitignore.