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
Related
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.
Circleci keeps failing with this error
ECONFLICT Unable to find suitable version for angular
These are my dependencies in bower.json
"dependencies": {
"angular": "1.4.7",
"angular-animate": "1.4.7",
"angular-credit-cards": "2.3.5",
"angular-local-storage": "0.2.2",
"angular-messages": "1.4.7",
"angular-sanitize": "1.4.7",
"angular-translate": "2.7.2",
"angular-ui-router": "0.2.15",
"bluebird": "2.9.34",
"bourbon": "4.2.6",
"immutable": "3.7.5",
"neat": "1.7.2",
"normalize-scss": "3.0.3",
"ramda": "0.16.0",
"rxjs": "2.5.2",
"system.js": "0.19.6",
"angular-markdown-directive": "0.3.1",
"angularjs-geolocation": "0.1.1",
"angulartics": "0.20.2",
"angulartics-google-analytics": "0.1.2",
"angulartics-facebook-pixel": "0.1.0"
},
"resolutions": {
"angular": "1.4.7"
}
I tried running it locally and it works fine, not sure what's the problem. Any help would be appreciated
add
"ignoredDependencies": ["angular"]
to your bower.cc file and it will ignore the dependancy (but you must be sure yourself that the package works with your version of angular).
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']);
I am new to the mean stack and am trying to add ngSanitize. I installed on the command line and see the library inside /bower_components/ but the angular-sanitize.js script isn't loading on the app. Am I missing a step for this? I tried adding the module to the default modules in /public/init.js but still no luck.
The bower.json file looks correct too:
{ "name": "mean", "version": "0.4.0", "dependencies": {
"jquery": "1.x",
"jquery-ui": "~1.10.3",
"angular": "latest",
"angular-resource": "latest",
"angular-cookies": "latest",
"angular-mocks": "latest",
"angular-route": "latest",
"bootstrap": "3.1.1",
"angular-bootstrap": "0.11.0",
"angular-ui-router": "#master",
"angular-sanitize": "~1.2.22" } }
Make sure ngSanitize is included in your index.html file. Running
bower install
will not do that automatically. Depending on your Gruntfile, running
grunt serve
might add it for you
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.