Why does Bower say Angular depends on random things? - angularjs

I am trying to install a package, for instance bower install restangular --save
Then Bower asks me to choose an Angular version:
> Unable to find a suitable version for angular, please choose one:
> 1) angular#1.2.6 which resolved to 1.2.6 and has ang-changeorg, angular-cookies#1.2.6, angular-mocks#1.2.6, angular-resource#1.2.6,
> angular-sanitize#1.2.6, angular-scenario#1.2.6 as dependants
> 2) angular#1.2.17-build.226+sha.b6388b3 which resolved to 1.2.17-build.226+sha.b6388b3 and has angular-animate#1.2.17-build.226+sha.b6388b3 as dependants
> 3) angular#* which resolved to 1.2.18 and has restangular#1.4.0 as dependants
> 4) angular#~1.2.0 which resolved to 1.2.19-build.258+sha.ea653e4 and has angularfire#0.7.1 as dependants
> 5) angular#>= 1.0.8 which resolved to 1.3.0-build.2845+sha.e57ad6a and has angular-ui-router#0.2.10 as dependants
>
> Prefix the choice with ! to persist it to bower.json
In these options ang-changeorg is another project I've worked on locally, has no relation to my current working directory.
My bower.json for the current project looks like so:
{
"name": "ang-changeorg",
"version": "0.0.0",
"appPath": "public",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
"bootstrap": "~3.0.3",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"firebase": "~1.0.11",
"angularfire": "~0.7.1",
"spin.js": "~2.0.0",
"angular-ui-router": "~0.2.10",
"angular-animate": "~1.2.16",
"ng-file-upload": "~1.4.0"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
},
"resolutions": {
"angular": "1.2.6"
}
}
bower cache clean did not resolve this.
Why does bower list ang-changeorg as a dependent? Clarity on how these angularjs version dependents work would be awesome.

It's because in your bower.json, the name of your project is ang-changeorg
{
"name": "ang-changeorg",
"version":
And all the dependencies in that file
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
...
are the ones "name": "ang-changeorg" are dependent to.
Therefore ang-changeorg is dependent to angular#1.2.6 because the version 1.2.6 of angular is specified in your bower file:
"dependencies": {
"angular": "1.2.6",

Each package listed in your bower.json file has it's own bower.json file which lists another set of dependencies.
So, when it says that ang-changeorg has angular#1.2.6 as a dependant, that's because the ang-changeorg package has angular#1.2.6 listed in it's bower.json file.

Consider upgrading to latest Angular 1.2.18 in all of your Bower calls, you've got some mixed dependencies and most likely Restangular would prefer the latest or at least matching with the latest version ("angular-animate": "~1.2.16").
I don't think you'll see any breaking changes.

Related

fixing version problems in bower after installing Angular Material

I have a project which was using angular version 1.4. I installed angular material via bower and then subsequently received the following error:
Uncaught TypeError: angular.module(...).info is not a function
I read this was to do with the version of angular I'm using so I updated angular and then angular-animate to 1.6. However this didn't fix the problem. I tried running bower update but I still have the above error.
When I ran bower update I received the following warning...
Resort to using angular#~1.4.2 which resolved to angular#1.4.14
Code incompatibilities may occur.
this is the contents of my bower.json file:
{
"name": "node-template",
"version": "0.0.0",
"main": [
"./public/styles/*.css",
"./public/scripts/*.js"
],
"dependencies": {
"angular-animate": "1.6",
"angular-sanitize": "~1.4.2",
"angular-messages": "~1.4.2",
"bootstrap-sass": "~3.3.5",
"jquery": "~2.1.4",
"angular": "1.6",
"angular-ui-router": "~0.2.15",
"angular-bootstrap": "~2.5.0",
"angular-google-chart": "~0.1.0",
"velocity": "~1.4.2",
"animate.css": "~3.5.2",
"angular-file-saver": "~1.1.3",
"ng-file-upload": "~12.2.13",
"ng-img-crop": "ngImgCrop#~0.3.2",
"angularfire": "~2.3.0",
"angular-material": "~1.1.4"
},
"devDependencies": {
"angular-mocks": "~1.4.2"
},
"overrides": {},
"resolutions": {
"jquery": "~2.1.4",
"angular": "~1.4.2"
}
}
Is bower telling me I'm using version 1.4? I don't understand why it cannot resolve the version problems I'm encountering?
Edit:
here is my new bower.json after upgrading to angular 1.5:
{
"name": "node-template",
"version": "0.0.0",
"main": [
"./public/styles/*.css",
"./public/scripts/*.js"
],
"dependencies": {
"angular-animate": "1.4",
"angular-sanitize": "~1.4.2",
"angular-messages": "~1.4.2",
"bootstrap-sass": "~3.3.5",
"jquery": "~2.1.4",
"angular": "1.5",
"angular-ui-router": "~0.2.15",
"angular-bootstrap": "~2.5.0",
"angular-google-chart": "~0.1.0",
"velocity": "~1.4.2",
"animate.css": "~3.5.2",
"angular-file-saver": "~1.1.3",
"ng-file-upload": "~12.2.13",
"ng-img-crop": "ngImgCrop#~0.3.2",
"angularfire": "~2.3.0",
"angular-material": "~1.1.4"
},
"devDependencies": {
"angular-mocks": "~1.4.2"
},
"overrides": {},
"resolutions": {
"jquery": "~2.1.4",
"angular": "1.5"
}
}
You have Angular 1.4.14 installed. Looking at the bower.json for Angular Material the minimum version of AngularJS required for the package is 1.5 which is probably why you are having errors. Can you not update to AngularJS 1.5?
Failing that, I suggest you install an older version of Angular Material that is compatible with 1.4.x
The error I was seeing...
angular.module(...).info is not a function
...seems to arise when the version of angular-aria (required by angular-material) is newer than the version of angular. I managed to get my build working again by setting angular-aria to be the same version as angular.

Bower component installed but missing from index.html

I've installed lodash using bower to my angularjs app:
bower install --save lodash
bower.json is updated accordingly:
{
"name": "my-app",
"version": "0.0.0",
"dependencies": {
"lodash": "^4.11.2",
"angular": "~1.4.0",
"json3": "~3.2.4",
"jquery": "~1.10.0",
"sass-bootstrap": "~3.0.0",
"es5-shim": "~2.1.0",
"angular-resource": "~1.4.0",
"angular-cookies": "~1.4.0",
"angular-sanitize": "~1.4.0",
"angular-route": "~1.4.0",
"angular-ui": "~0.4.0"
},
"devDependencies": {
"angular-mocks": "~1.4.0",
"angular-scenario": "~1.4.0"
}
}
A lodash directory is added to the bower_components directory and I've run grunt server. However, the <script> tag for lodash is not added to index.html.
How do I add lodash to my app after it's installed with bower? FWIW, I've installed other frontend components successfully and haven't hit this problem, so either I'm doing something differently or my environment has changed.
I'm unsure how to investigate this issue.
You need to do it manually or use Grunt Wiredep task. If your app is already configured with wiredep task then just run grunt wiredep

How to add "ui.bootstrap" dependency to existing bower components for achieving "typeahead" feature?

How to add "ui.bootstrap" dependency to existing bower components for achieving "typeahead" feature?
i follow the given link(https://angular-ui.github.io/bootstrap/) for the purpose of my auto complete suggestions while doing search an item Asynchronously and it needs ui.bootstrap for achieving this feature so how can i add this feature to my existing project bower.json file
My bower.json
{
"name": "project-ui",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap": "^3.2.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "projectUiApp"
}
According to the docs https://github.com/angular-ui/bootstrap/blob/master/README.md#install-with-bower
Running this command will install and add angular-bootstrap to dev dependencies
bower install angular-bootstrap --save-dev
and then according to https://angular-ui.github.io/bootstrap/#/getting_started
As soon as you've got all the files downloaded and included in your page
you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);

What does Bower mean when it says "unable to find a suitable version"?

What does it mean when it says "unable to find a suitable version for angular"? In my bower.json I have specified 1.2.6 as the angular version. Why am I being given 6 choices here, 5 of which may cause my project to stop working?
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-scenario#1.2.6
2) angular#1.2.15 which resolved to 1.2.15 and is required by angled-horizon
3) angular#1.2.16 which resolved to 1.2.16 and is required by angular-animate#1.2.16
4) angular#>= 1.0.2 which resolved to 1.2.16 and is required by angular-ui-utils#0.1.1
5) angular#>=1 which resolved to 1.2.16 and is required by angular-bootstrap#0.10.0
6) angular#~1.2.10 which resolved to 1.2.16 and is required by angular-strap#2.0.1
Also, what happens if I use ! to persist it to bower.json?
Here is my bower.json if it helps:
{
"name": "angled-horizon",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.15",
"json3": "3.2.6",
"es5-shim": "2.1.0",
"jquery": "1.10.2",
"sass-bootstrap": "3.0.2",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"angular-ui-utils": "0.1.1",
"angular-animate": "1.2.6",
"angular-bootstrap": "0.10.0"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6",
"angular-ui-utils": "0.1.1"
},
"resolutions": {
"angular": "1.2.15"
}
}
I found this answer in the internet.
You can have a look on it, they are suggesting to add resolution
"resolutions": {
"angular": "1.2.0-rc.2"
}

Strange angular version resolving bug with bower install

I'm trying to update my angular version, and I think bower went just mad.
My deps :
"dependencies": {
"underscore":"*",
"momentjs":"~2.2.1",
"bootstrap": "~3.0.0",
"jquery": "~1.9.1",
"jquery.cookie": "*",
"jquery-ui": "~1.10.3",
"jquery-file-upload": "*",
"angular": "~1.2.0-rc.2",
"angular-route": "~1.2.0-rc.2",
"angular-resource": "~1.2.0-rc.2",
"angular-animate": "~1.2.0-rc.2",
"angular-cookies": "~1.2.0-rc.2",
"angular-i18n": "~1.2.0-rc.2",
"angular-bootstrap" : "*",
"ng-grid": "*",
"highcharts": "*",
"highcharts-ng": "*"
},
"devDependencies": {
"angular-mocks": "~1.2.0-rc.2",
"angular-scenario": "~1.2.0-rc.2"
}
the important thing here is : all angular modules are version 1.2.0-rc.2
But when doing
bower install
here is the result :
Unable to find a suitable version for angular, please choose one:
1) angular#1.0.8 which resolved to 1.0.8 and has angular-scenario#1.2.0-rc.2 as dependants
2) angular#1.2.0-rc.2 which resolved to 1.2.0-rc.2 and has angular-animate#1.2.0-rc.2, angular-cookies#1.2.0-rc.2, angular-mocks#1.2.0-rc.2, angular-resource#1.2.0-rc.2, angular-route#1.2.0-rc.2, angular-scenario#1.2.0-rc.2 as dependants
3) angular#~1.2.0-rc.2 which resolved to 1.2.0-rc.2 and has tael-web as dependants
4) angular#>=1 which resolved to 1.2.0-rc.2 and has angular-bootstrap#0.6.0 as dependants
5) angular#>=1.0.4 which resolved to 1.2.0-rc.2 and has highcharts-ng#0.0.2 as dependants
bower seems to think that angular-scenario 1.2.0-rc2 requires angular 1.0.8 ... ???
which is actually just false : https://github.com/angular/bower-angular-scenario/tree/v1.2.0-rc.2
bower.json :
{
"name": "angular-scenario",
"version": "1.2.0-rc.2",
"main": "./angular-scenario.js",
"dependencies": {
"angular": "1.2.0-rc.2"
}
}
What I am missing here ? What can I do to resolve this ? To be clear : I dont want to use the interactive conflict resolving method, because this is appening on a remote CI. I just want to underscore how the * assume angular scenario 1.2.0-rc2 as angular 1.0.8 as dependency...
thanks
Try adding this section to your bower.json:
"dependencies": {
...
},
"resolutions":{
"angular": "1.2.0-rc.2"
}
Note: angular version in resolutions as same as version in dependencies.
I got the same problem with the latest bower version.
You can just do as the bower output prompts: Prefix the choice with ! to persist it to bower.json to choose one from the options provided. Then your bower.json will be updated with an additional "resolutions": { ... } block then the problem will be solved.
Instead of:
"angular": "~1.2.0-rc.2"
Try:
"angular": "=1.2.0-rc.2"
Might not be the right way to do it however but it solved a similar issue in my project.

Resources