how to include ngAnimate dependency in angular with yeoman

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

Method 2

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

  1. 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply