Angular grunt build (from yeoman) breaks my app

Question

after running the build from the /dist folder I get:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.1/$injector/modulerr?p         


        

Answer 1

I will try to be brief explaining the problem when building with usemin 2.0.x and ngmin in Angularjs (according my experience, I may be wrong in something, if yes please correct me):

The normal flow in the Build grunt task is that ngmin is executed before usemin and others, to let the code with injections like this:

...
angular.module("Config",[])
    .config(["$httpProvider","CONSTANTS","ERRORS","HEADERS",function(a,b,c,d){var
...

usemin 0.1.x was using only 'concat', but the version 2.0.x is using 'concat' and 'uglifyjs' so, after concatenate the code, it changes the javascript code again, this corrupts the ngmin, as you can see in the following example:

...
angular.module("Config",[])
    .config(function(a,b,c,d){var
...

So you have to stop it defining the flow in useminPrepare, like the following:

useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                steps: {'js': ['concat']},
                post: {}
            }
        }
    },

Edit You can add the task in the grunt tasks:

grunt.registerTask('build', [ 
    'clean:dist', 
    'jshint', 
    'useminPrepare', 
    'imagemin', 
    'cssmin', 
    'ngmin', 
    'uglify', 
    'rev', 
    'usemin'
])

Hope it helps!

Answer 2

I was also facing the same issue after yo angular setup without any modifications.

The following discussion helped me resolve it: https://github.com/DaftMonk/generator-angular-fullstack/issues/164

In a nutshell:

Search for

<!-- build:js scripts/vendor.js -->

and change it to

<!-- build:js(app/..) scripts/vendor.js -->

Answer 3

I think the default GruntFile.js has changed a bit in Yeoman since this question was answered.

This worked for me:

Uncommented out the following uglify block and added the mangle:false option.

uglify: {
   options:{mangle:false},
   dist: {
     files: {
       '<%= yeoman.dist %>/scripts/scripts.js': [
         '<%= yeoman.dist %>/scripts/scripts.js'
       ]
     }
   }
},

Then I commented out the ngmin line (which took forever to run anyway).

The result is non-mangled js which is considerably larger, but runs my angular code well. Eventually I suppose ngmin will be smart enough to handle things more seamlessly, but until then I'm okay with the extra bytes.

Answer 4

if you are using Yeoman for building your angular application.

Simply type

yo doctor

This will help you to identify what all issues are present with your application.

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✖ Node.js version

Your Node.js version is outdated.
Upgrade to the latest version: https://nodejs.org

✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version

Found potential issues on your machine :(

Answer 5

Is everything working if you only serve the files (grunt server)? So: No problem with angular this way?

Have your read the linked error page? http://docs.angularjs.org/error/$injector:modulerr?p0=ourname&p1=Error:%E2%80%A6(http:%2F%2Flocalhost:8085%2Flib%2Fangular%2Fangular.min.js:32:462)

It tells you, that there is a problem with our "ourname" module.

Do you have some code for us?

I am not quite sure, what this changes, but you can also define it like:

useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
                dest: '<%= yeoman.dist %>',
                flow: {
                    steps: {'js': ['concat','ngmin']},
                    post: {}
                }
            }
        },

https://github.com/yeoman/grunt-usemin#flow Did you missed the "flow"?

Maybe one of the questions helps to find the solution ;)