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
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.
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
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).
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.
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"
}
}
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']);