How to uglify an angular project using grunt?

Question

I'm trying to deploy a meanjs project but can't seem to figure out how to minify,concat&uglify the project using grunt.

What I've found out so far :

1. Need to run concat -> ngAnnotate -> uglify (else code won't run)
2. need to concat in dependency order (else it won't run)

With this logic I've managed to create a single 'uglified' version of the relevant 3rd party libraries (node modules), but I'm unable to do the same for the modules I've written.

I've tried using concat tools that are supposed to reorder the files according to dependencies (grunt-concat-in-order, grunt-concat-dependencies, grunt-concat-deps) but nothing helped. Just errors of missing modules/declarations.

I've tried reordering the js files that should be concatenated, and each time something else is missing and the site loads partially (at best). reordering the files according to the order they appear in the compiled header doesn't help.

Is there something that concats Angular files according to their dependencies or or a general logic in which I should reorder them?

Thanks.

Answer 1

FOUND IT! apparently JS and Angular are flexible with missing ';' in the end of module/directive declarations. I've went through the entire code and added missing ';' in the appropriate places.

For example:

angular.module('core').filter('xyz', [function() {
    .....
}])

Finally can go to sleep.

*original post: Angular module().factory() is not a function after concat (gulp) (cheers to Max Yari)

Answer 2

The first thing to check is that you actually use the DI pattern everywhere in your code as the function parameters will be replaced during uglification and thus won't be resolved let anymore.

ControllerName.$inject = ['component'] 

Or

angular.module('module') 
   .controller(['module', function (module) { /*... */}) ;

When you've done that, check if you may explicitly specify file order like this (pseudo code):

['module1_decl_file.js','module2_decl_file.js', '*.js','**/*.js']