Unable to find a suitable version for angular with bower installation error for angular-animate module

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

I am using Angular 1.2.6. I am trying to use bower to install angular-animate and ngAnimate-animate.css. I’ve tried installing (bower install --save angular-animate), uninstalling several time and diff code on github from 1.2.16 and 1.2.17.

Bower keeps wanting to install the older version of angular-animate 1.2.16 compatible with Angular 2.1.12.

All of my passing karma unit tests fail after installing angular-animate as well.

I keep on getting this error. Any ideas why?

bower angular-animate#*         cached git://github.com/angular/bower-angular-animate.git#1.2.16
bower angular-animate#*       validate 1.2.16 against git://github.com/angular/bower-angular-animate.git#*
bower angular#1.2.16            cached git://github.com/angular/bower-angular.git#1.2.16
bower angular#1.2.16          validate 1.2.16 against git://github.com/angular/bower-angular.git#1.2.16
bower angular#>=1               cached git://github.com/angular/bower-angular.git#1.2.16
bower angular#>=1             validate 1.2.16 against git://github.com/angular/bower-angular.git#>=1

Unable to find a suitable version for angular, please choose one:
    1) angular#1.2.6 which resolved to 1.2.6 and is required by angular-cookies#1.2.6, angular-mocks#1.2.6, angular-resource#1.2.6, angular-route#1.2.6, angular-sanitize#1.2.6, angular-scenario#1.2.6, temp
    2) angular#1.2.16 which resolved to 1.2.16 and is required by angular-animate#1.2.16
    3) angular#>=1 which resolved to 1.2.16 and is required by angular-bootstrap#0.10.0

Prefix the choice with ! to persist it to bower.json

[?] Answer:

I have entered !1 and !3 before with no success.

bower.json

{
  "name": "temp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.6",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.1.1",
    "angular-resource": "1.2.6",
    "angular-cookies": "1.2.6",
    "angular-sanitize": "1.2.6",
    "angular-route": "1.2.6",
    "angular-bootstrap": "~0.10.0",
    "angular-toggle-switch": "~0.3.0",
    "angular-animate": "~1.2.16",
    "ngAnimate-animate.css": "~0.1.1"
  },
  "devDependencies": {
    "angular-mocks": "1.2.6",
    "angular-scenario": "1.2.6"
  },
  "resolutions": {
    "angular": ">=1"
  }
}

Related question on SO.

Angular moved angular-animate out of core to it’s own dependency in v1.2

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

Two part solution

  1. ngAnimate-animate has a js file, app/bower_components/ngAnimate-animate.css/animate.js that needs to be added to files: in karma.conf.js

  2. bower info angular-animate and install the version specific to your angular version. In this case, bower install angular-animate#1.2.6 --save

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