Grunt.js concatenates and breaks angular.js project?

Question

I have an Angular.js project. I can use grunt serve and it runs perfectly. However, when I build it to the dist folder, it will not run and the console throws the error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module designSystemApp due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=a
at http://0.0.0.0:9000/scripts/vendor.js:3:30474
at ...<omitted>...2) 

The build happens with no errors, the files (Bower components) are concatenated into vendor.js. But the browser errors out. The error is for a minimized file, so it's a bit hard to debug the error. Anyone seen this before?

My grunt file is here: https://gist.github.com/smlombardi/7fa15161b60c2f63f416

I'm a little lost. Thanks.

Answer 1

You can handle your Dependency Injection in various ways. E.g.:

function injectableFunc($someService, someOtherDependency) {...}

or

['$someService', 'someOtherDependency', 
    function (thisWillBeSomeService, nameDoesNotMatter) {...}]

The main difference is that the second form "survives" minification, because the dependencies are identified by the first string items of the array (and strings do not get minified).
The second form will break after minification, because the variable-names (which are used for recognising the injectables) are changed.

If your workflow includes minification (which it should), you can:

1. use the second form
2. use ngmin for minification, which can handle the 1st form without breaking the app.