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
Related
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>
I am currently using the angularbknd-sdk in my Ionic 1 mobile app.
I installed it with Bower, I loaded it as a npm module thanks to browserify-shym:
package.json
"backand": "./bower_components/angularbknd-sdk/dist/backand.min.js"
then I injected the 'backand' module as a dependency of my app :
app.js
require('backand');
angular.module('myApp', ['backand'])
This works like a charm.
But now I would like to use the new Backand angular-sdk, and load it from NPM instead of Bower.
This is what I did :
I removed angularbknd-sdk from bower, from my package.json and the require('backand') line from my app.js.
Then,
I did :
$ npm i -S #backand/angular1-sdk
and I put this line in my app.js :
require('#backand/angular1-sdk');
But when I run my app, I got this error in the javascript console :
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=Error%3A%20%…%2Fandroid_asset%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.min.js%3A54%3A463)
What am I doing wrong ?
Thanks in advance.
Without more detail on the exact line that is failing it is hard to tell exactly what is not functioning properly, but this looks like it is missing an ionic include. I would check to make sure you have no occurrences of the Ionic JavaScript SDK in your vendor folder, and that the existing SDK has no files remaining in your project - it is possible that there is an include conflict if the physical javascript files for the old angular1bknd-sdk were not removed from the vendor folder managed by bower.
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.
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.
I created my angular application with "yeoman" using "yo angular" with grunt sass bootstrap.
But with node_mudules bower_component and all dev feature the empty project is 200mo sized
How can I build my application for production, include minify css/js and keep only used and required dependance.
EDIT
I don't understand the -1, thousand people use the angular-generator from yeoman and I can't find a build tutorial for this specific generator.
grunt build seems to work but the website is not displaying well.
grunt serve:dist build and run on serve but same problem as grunt build
The dev application ( it s just yo angular empty project )
After grunt serve, it works and i can navigate
After grunt serve:dist, it doesn't work and i can't navigate, it seems like "bower_components" are not build well
if you are using grunt do: "grunt build" or "grunt serve:dist", after the build you will get a dist folder, everything inside is you production app included minify css/js, you don't need anymore. And specify that for unknow reason "yo angular" add jquery to "devDependencies" but not in "dependencies"
in bower.json in you project.
You do not need to deploy everything from your project folder. Hope it help.
You do not need to deploy everything from your project folder. You can find info on this page.
Only files which you include/import in your index.html or css ( images or fonts ), are being used and tracked. Rest are all useless after deployment.
run gulp --production. firts it will clean dist folder (if exist) then move the minified and uglified file there.