Correct way of using grunt's "bower_concat" and "angular-i18n"

Question

If one is not using grunt's "concat" and "bower_concat", angular-i18n is used this way:

 <html ng-app>
    <head>
        ...
       <script src="angular.js"></script>
       <script src="i18n/angular-locale_de-de.js"></script>
        ...
    </head>
 </html>

(According to here: https://docs.angularjs.org/guide/i18n)

But... of course: I'm using concat and bower_concat.
I'm using them this way:

First I use bower_concat and create build/bower-concat.js

Note: bower_concat reads every bower.json of every subdirectory living in bower_components and it concatenates all the main files.

Note 2: the bower.json of "angular-18n" has "ignore": ["**/.*", ...
Then I concat all my js's (my controllers, etc), into build/inouse-concat.js
Finally I concat bower-concat.js with inhouse-concat.js into all-concat.js
<script src="build/all-concat.js"></script>

So I though that I could include the corresponding locale, "angular-i18n/angular-locale_de-de.js", in the third step, like this:

  // inhouse js with bower's js with angular's i18n into one file
  allJsConcat: {
    src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
    dest: 'build/all-concat.js',
  }

But this is not working. I'm getting:
Uncaught ReferenceError: require is not defined

Question: how would you recommend using grunt, concat, and bower_concat with angular's locale js? what am I doing wrong?

score 3 · Accepted Answer · answered Mar 04 '15 at 18:11

Damn, I hate to answer my own questions because of rushing in asking...

Anyway, this worked:

Gruntfile.js

    bower_concat: {
        all: {
            dest: 'build/bower-concat.js',
            cssDest: 'build/bower-concat.css',
            exclude: [
                'angular-i18n'
            ],
            bowerOptions: {
                relative: false
            }
        }
    },

    concat: {
        ...

        allJsConcat: {
            src: ['build/bower-concat.js', 'bower_components/angular-i18n/angular-locale_de-de.js', 'build/inhouse-concat.js',],
            dest: 'build/all-concat.js',
        }
    }

The trick was using the exclude parameter of grunt-bower-concat.

There is also a mainFiles parameter that I think would do the trick too:

mainFiles

Some Bower components don’t list their main files or (more likely) don’t have bower.json file at all. In this case bower-concat will try to guess main file but sometimes it can’t or choose wrong one. You could explicitly define main files for that components.

So I think that using this would work too:

 mainFiles: {
     'angular-i18n': 'angular-locale_de-de.js',
 }

Without doing the "three file concat" (so its more elegant)

Correct way of using grunt's "bower_concat" and "angular-i18n"

1 Answers1