how to include ngAnimate dependency in angular with yeoman

Question

I am create an angular application using the combination of yeoman, gruntjs and bower. I installed my angular app with yo angular myapp and then added few dependencies with bower and finally I would run grunt server and start working.

Only when I try to add the ng-animate dependency, I get into problems. This dependency gets downloaded but its scripting tag does not get added into index.html and the required reference does not get added into the karma.conf.js file.

I have tried to add these two references manually:

in the index.html

<script src="bower_components/angular-animate/angular-animate.js"></script>

and in karma/conf.js

files: [
  ...
  'app/bower_components/angular-animate/angular-animate.js',
  ...
],

But this only works if the grunt server is already running. if I stop the server and re-run it again, the two reference that I have added manually vanish. How do I fix this issue?

Thanks

Solution 1

You can try one of the two following solutions:

1. add it to you bower.json file as a dependency, then run bower update

or

2. open terminal in you project directory and run: bower install angular-animate

either one will persist it to your bower.json file and cause it to not be deleted when you run grunt server again.

Solution 2

You have to do this:

1. Install with bower:

bower install angular-animate

2. Add a < script /> to your index.html:

< script src="/bower_components/angular-animate/angular-animate.js"></script >

3. And add ngAnimate as a dependency for your app:

angular.module('myApp', ['ngAnimate']);

See the ng-newsletter post on ngAnimate for more information on these steps