Add locale moment to an AngularJS app

Question

I'm trying to configure the locale language for an AngularJS app based on Yeoman.

When I serve the dist package after building my app (grunt build), the script reference dissapears. Here's a list of my dependencies on the index.html file.

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/angular-hotkeys/build/hotkeys.min.js"></script>
<script src="bower_components/moment/locale/es.js"></script>
<!-- endbower -->
<!-- endbuild -->

Where should I place this script reference to keep it for the dist package?

<script src="bower_components/moment/locale/es.js"></script>

Thanks in advance!

Answer 1

You should insert it outside the bower section, like this:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
…
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/angular-hotkeys/build/hotkeys.min.js"></script>
<!-- endbower -->
<script src="bower_components/moment/locale/es.js"></script>
<!-- endbuild -->

Your grunt/gulp task is automatically filling the bower:js section (each time there a change to bower.json happens) by looking into main entry in bower.json files of every bower component you require. The locale files are not listed as main files, so even if you'd put it between bower:js and endbower section manually, it'd dissapear with the nearest change of the bower.json file, or during the build process.

The code you put outside the bower section will stay there.

And in the end, during the build process, all the files linked between build:js and endbuild comments are concatenated into one vendor.js file.