Webapp not finding installed bower components - angularjs

I have a jersey-quickstart-webapp that i am developing in Eclipse Neon. I am trying to get bower up and running, and have installed bower as described by eclipse here: https://www.eclipse.org/community/eclipse_newsletter/2016/may/article1.php
and as shown in the associated instruction video here: https://www.youtube.com/watch?v=PU8YoWNAkK0
That is:
I have installed node.js, npm, and bower
Ran Bower Init which created my bower.json file
Added angular as a dependency in my bower.json
Ran Bower install and installed angular
Updated my index.html to include the bower_components version of angular
My bower.json file looks like this:
{
"name": "pododdle",
"version": "0.0.0",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "1.5.3"
}
}
My bower_components directory has been successfully installed in my project with the following location containing the angular.min.js file: bower_components/angular/angular.min.js
I have changed the appropriate line in my index.html from:
<script src="https://code.angularjs.org/1.5.3/angular.js"></script>
to:
<script src="bower_components/angular/angular.min.js"></script>
However, after the web-app is published to the server, when I try and load the application it fails to load in the browser and in the browser console displays a 404 error for the angular.min.js file, specifically pointing to the above src link in the index.html:
http://localhost:8080/pododdle/bower_components/angular/angular.min.js (index):12 GET
http://localhost:8080/pododdle/bower_components/angular/angular.min.js localhost/:12
Am I missing a step in my bower installation? All help much appreciated!

This problem is similar to this question asked here: Can't Get Files Installed with Bower to Work in Eclipse
It is solved by opening: Project -> Properties - > Deployment Assembly.
There you can see list of local resources which will be deployed by eclipse and their destinations. If you add your "bower_components" folder there and set its deploy path to "/bower" then you will be able to reference angularjs in your index.html file with the following line:
<script src="bower/angular/angular.min.js"></script>

Related

angularjs: can't install angular-cookies to my project

I my project I came into an issue about the package of angular-cookies.
I have download the package and place it in my project. And as usually, in index.html, I add a script tag:
<script src="vendor/angular-cookies/angular-cookies.min.js" charset="UTF-8"></script>
But when the pages loaded I got an error message:
Uncaught TypeError: c.module(...).info is not a function at angular-cookies.min.js:7
in the package, it uses angular.module.info but it is not regarded as a function?
So what is the reason for this issue? Is it because version issue? Any help
I had the same problem with a recent bower update I've done. I don't know if the angular 1.6.3 is stable so I went to https://code.angularjs.org/latest/ and I saw that is 1.5.8 angular version which is used.
So to resolve it, I added these versions in my bower.json :
"dependencies": {
"angular-cookies": "1.5.8",
},
"resolutions": {
"angular": "1.5.8"
}
You should install particular dependecies according to angular.You can achieve it by using bower install like this:
bower install angular-cookies#1.5.8
bower install angular#1.5.7

Grunt build does not seem to be including ui-router

I've tried this a few different ways now but I've installed angular-ui-router with bower using the following command:
bower install angular-ui-router
Awesome, so I can see that there is an angular-ui-router folder in my bower_components directory. I can also see it listed as a dependency in bower.json
I included the path in my project like so
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
Running grunt serve, everything works perfectly. All of my bower components load and ui-router is routing.
Running grunt build, the build succeeds. But hosting the site, it seems that ui-router was not included. I get this all too familiar error
Module 'ui.router' is not available!
After poking around with grunt configs and a few other things, my last ditch effort was to stick a CDN script tag in my project
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
However, I get the same errors as above after running grunt build.
Is there some special trick to including ui-router? All other bower components seem to be included just fine.
Ok, I just saw that ui-router doesnt have the 'main' entry in package.json. I didnt have time to poke more. But, in bower.json file. You can add overrides entry so that it adds the file in packaging dependency.
"overrides": {
"angular-ui-router": {
"main": [
"release/angular-ui-router.js"
]
}
}
I'm not too sure, about the path. You can check your angular-ui folder to be sure. Also, dont point to the minified file, as uglify will run minification on your files.

Using bower_components with Grunt

I created a simple data listing app using angular js.
I used Bower and also grunt. Grunt to serve the project with a specific port. But have a error.. When i'm serve the project with Grunt, the bower_components are not working. I mean all the jquery and also angular parts get 404. I here by attach a link to my project.
Get my project here - https://github.com/chanakaDe/DemoApp
First clone it, then "npm install" and then "bower install".
Please tell me how to make them work.
Always get 404 errors like this
GET http://localhost:1701/bower_components/jquery/dist/jquery.js 404
You're specifying ./src as the root of your server in the Gruntfile. Unfortunately, bower installs it's dependencies a folder above it, in the root of your project. Your HTML has a couple of script tags with ../bower_components/[path to files], but this will not work.
You need to try to install the bower dependencies in your src folder. Add a .bowerrc file in the root of your project with the following content:
{
"directory" : "src/bower_components"
}
Then reinstall bower dependencies by doing:
$ bower install
Check if a folder bower_components have been created in your src folder.
Next replace ../bower_components with bower_components in the index.html file.

Bootstrap Dist fails to load with Bower

I'm new to Yeoman and Angular and am trying to build a dist package of my app.
Currently in development all the dependencies load as expected, but when I run Grunt and grunt serve:dist the application loads but it is not able to find the bootstrap.css file. I have tried various different solutions such as:
Change the bower.json file to use bootstrap: '3.3.4' instead of version 3.3.5
Adding an overides object to the bower.json file as follows:
"overrides":{
"bootstrap":{
"main":[
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
I have tried both the bootstrap.css and bootstrap.min.css file in the index.html file as follows:
When I run the server the index.html file is looking to load the bootstrap file but gets the following error:
Failed to load resource: the server responded with a status of 404 and the address is http://localhost:9000/bower_components/bootstrap/dist/css.bootstrap.css
I have seen a bit of discussion about this problem online, but I have tried all the solutions suggested with no luck.
Can anybody shed any light on this?
It works fine in a development environmemt when I run grunt serve - but the problem arises in the production dist version.
Thanks
Linda

How to make Bower download resources listed under ignore?

I have checked out the angular-leaflet-directive project using Bower. I noticed that the examples directory, which is present in the git repository was not downloaded. Presumably because it is listed in the ignore section of bower.json
I want Bower to download this directory. So I deleted the entry and tried updating the component.
"ignore": [
"**/.*",
"src",
"doc",
<s>"examples",</s>
"test",
"*.md",
"Gruntfile.js",
"package.json",
"bower.json"
]
bower update angular-leaflet-directive
This did not help. There was another identical file: .bower.jsonat the same location as bower.json. Making changes in that file did not help either.
I guess Bower is using bower.json from the repo and not the local one.
Is there a way to override parameters from remote bower.json with those from local bower.json?
If not, what is the recommended way of downloading the missing directory?

Resources