Angularjs (Error: $injector:modulerr Module Error) on concatenating bower components?

Question

When i'm concatenating bower_components of angularjs (angular & ui-router) using grunt,

I get a (Error: $injector:modulerr Module Error) Complete error here https://goo.gl/0yz6pm

on the built script.

I DO NOT get this error when i'm using the script source directly from the bower_components

Therefore i think it's an issue with concatenation by grunt.

Below is the grunt script,

grunt.initConfig({

    concat:{

        options: {
        },
        dist: {
          // the files to concatenate
          src: ['client/bower_components/angular/angular.min.js','client/bower_components/angular-ui-router/release/angular-ui-router.min.js'],
          // the location of the resulting JS file
          dest: 'client/bower_components/../assets/scripts/coreScript.js',
          nonull: true
        }

    }


  })


  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('build',['concat']);

}

I've also tried using a seperator:';' in options but to no help.

What can i do to make concatenation work here?

Answer 1

This setup looks fine, assuming all those script references are correct and you are referencing coreScript.js on your page. The only issue I can see here is your call to .registerTask . Observe your implementation

grunt.registerTask('build','concat']);

However, grunt is expecting a task array

grunt.registerTask('build', ['concat']); // close array with [

Could it be this task is not successfully running because of this issue? I am also not seeing a call to readJSON . Could you be also missing the following in your gruntfile.js declaration?

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        // ...
    }
});