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.
Related
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.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
I am new to angularjs I want to use the ui-router with bower.
I have added the following line to my bower.json
"angular-ui-router": "0.2.15"
the I have ran
bower install
I want to include the module in my index.html but I don't know which path to use.
By default bower installs packages inside bower_components directory. Make sure that this directory is web accessible. You can then include the script from:
bower_components/angular-ui-router/release/angular-ui-router.min.js
You can also change the default bower_components directory by setting a new value in your .bowerrc file as:
{
"directory": "./foo/bar"
}
This way bower will install packages inside foo/bar path instead of the default bower_components
Open terminal, go to project path.Use command,
$ bower install angular-ui-router
I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :
yo angular MyApp
i have the bower_components in the root directory and if i try to install Polymer through :
bower install --save Polymer/polymer
So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :
core-toolbar was not injected in your file.
Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.
so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?
I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :
{
"directory": "app/bower_components"
}
So now i can use bower to in install the Polymer elements that i need, with bower as usual :
bower install Polymer/core-toolbar
I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so
delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :
<!-- Polymer Section -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- My imports -->
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
I am trying to use yeoman, grunt and bower for my AngularJS development on Windows 7. I am using GitBash to run the commands. I did the following steps
Installed node.js (npm --version 1.4.14)
npm install -g yeoman grunt-cli bower
npm install -g generator-angular
cd c:/wamp/www
mkdir test-ang
cd test-ang
yo angular
When the scaffolding process is complete, I always find that my bower_components folder is outside app. Due to this my index.html is displayed without any styles and javascript as they link to "bower_components/bootstrap/dist/css/bootstrap.css". same thing happends for js files too. If I change it to ../bower_components/bootstrap/dist/css/bootstrap.css" in index.html, then things look fine. But doing grunt serve changes the index.html again
I tried to manually move bower_components inside app folder and edit .bowerrc file accordingly, but it did not help either. Also another interesting thing is, if I do the above listed steps in Virtual box ( running CentOs ) at my work machine, then the bower_components folder is automatically inside app folder.
Has anyone faced this before? Any thoughts or help would be appreciated.