Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add locale moment to an AngularJS app

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!

like image 253
lerp90 Avatar asked Jun 17 '15 17:06

lerp90


1 Answers

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.

like image 189
Tomek Sułkowski Avatar answered Nov 12 '22 16:11

Tomek Sułkowski