chanu1993 chanu1993 - 5 months ago 22
AngularJS Question

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

enter image description here

Answer

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.