AngularJS application deployment to Heroku, unable to find suitable angular-animate version

Question

I am deploying an AngularJS application to Heroku but am getting this error in the console:

remote: bower    ECONFLICT Unable to find suitable version for angular-animate
remote: 
remote:  !     Push rejected, failed to compile Node.js app
remote: 
remote: Verifying deploy....
remote: 
remote: !   Push rejected to test-app-12345

The problem (of course) seems to be with the angular-animate dependency.

I am using a Heroku angularJS buildpack "Yo Angular" and have followed their 4 step process for a successful application deployment to Heroku.

I tried fixing this by changing my bower.json file like recommended in this StackOverflow answer, hoping it would solve my issue. It did not.

Locally, I use grunt serve to start the application and that works for me just fine.

My bower.json looks like this:

{
  "name": "dashboard",
  "version": "0.0.0",
  "main": "index.html",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "dependencies": {
    "jquery": "~2.0",
    "bootstrap": "~3.1.1",
    "angular": "~1.3.15",
    "angular-ui-router": "~0.2",
    "angular-animate": "~1.3.15",
    "angular-resource": "~1.3.15",
    "angular-cookies": "~1.3.15",
    "angular-mocks": "~1.3.15",
    "angular-ui-utils": "~0.1",
    "angular-bootstrap": "~0.11.2",
    "moment": "~2.5",
    "less.js": "~1.6",
    "font-awesome": "~4.2.0",
    "form-builder": "0.1.0",
    "restangular": "~1.4.0",
    "lodash": "~2.4.1",
    "satellizer": "~0.3.2",
    "angular-xeditable": "~0.1.8",
    "fullcalendar": "~2.1.1",
    "angular-ui-calendar": "~0.8.1",
    "checklist-model": "~0.1.3"
  },
  "resolutions": {
    "font-awesome": "~4.2.0",
    "jquery": "~2.0",
    "fullcalendar": "~2.1.1",
    "angular": "~1.3.15",
    "angular-bootstrap": "~0.11.2"
  }
}

The code is public for now, so here is the link to the Github repo.

Anyone have tips for me, or a good idea of what I am doing wrong?

P.S. I found this information in bower's Github issues tracking, which is dealing with the same problem. Might be helpful in figuring this out.

Answer 1

This error occurs when two packages reference different versions of the same dependency.

You can resolve the issue by running rm -rf bower_components/ ; bower install

Then when prompted to choose a version prefix your answer with a "!" like I have below. Notice how bower will add a "resolutions" section.

Unable to find a suitable version for angular-animate, please choose one:
    1) angular-animate#~1.2 which resolved to 1.2.28 and is required by form-builder#0.1.0
    2) angular-animate#~1.3.15 which resolved to 1.3.17 and is required by dashboard
    3) angular-animate#~1.4.3 which resolved to 1.4.3

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

? Answer: !3

Here is your resolved bower.json file.

{
  "name": "dashboard",
  "version": "0.0.0",
  "main": "index.html",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "dependencies": {
    "jquery": "~2.0",
    "bootstrap": "~3.1.1",
    "angular": "~1.3.15",
    "angular-ui-router": "~0.2",
    "angular-animate": "~1.4.3",
    "angular-resource": "~1.3.15",
    "angular-cookies": "~1.3.15",
    "angular-mocks": "~1.3.15",
    "angular-ui-utils": "~0.1",
    "angular-bootstrap": "~0.11.2",
    "moment": "~2.5",
    "less.js": "~1.6",
    "font-awesome": "~4.2.0",
    "form-builder": "0.1.0",
    "restangular": "~1.4.0",
    "lodash": "~2.4.1",
    "satellizer": "~0.3.2",
    "angular-xeditable": "~0.1.8",
    "fullcalendar": "~2.1.1",
    "angular-ui-calendar": "~0.8.1",
    "checklist-model": "~0.1.3"
  },
  "resolutions": {
    "font-awesome": "~4.2.0",
    "jquery": "~2.0",
    "fullcalendar": "~2.1.1",
    "angular": "~1.3.15",
    "angular-bootstrap": "~0.11.2",
    "angular-animate": "~1.4.3"
  }
}