What is causing 'grunt serve' to throw 'No Bower components found'? - angularjs

I am starting out angular app with angular-fullstack in my Windows 7 box. I installed bunch of npm packages with -g options, including grunt-bower-install. I created the application first by running
yo angular-fullstack appname
There were no exception during the application creation. After application was created successfully I tried to run the app using
grunt serve
expecting the server to run. But the 'grunt serve' failed with
Running "bower-install:app" (bower-install) task
Cannot find where you keep your Bower packages.
We tried looking for a .bowerrc file, but couldn't find a custom
directory property defined. We then tried bower_components, but
it looks like that doesn't exist either. As a last resort, we tried
the pre-1.0 components directory, but that also couldn't be found.
Unfortunately, we can't proceed without knowing where the Bower
packages you have installed are.
Fatal error: No Bower components found.
I did find .bowerrc file and it was pointing to app/bower_components. Unfortunately, bower_components file was no where to be found. I am not sure what should be the content of the file to create it myself. Is it the missing file causing this problem or is there a npm package, I did not install correctly?
I installed bower using npm as well *
Thanks

Confusingly, the grunt-bower-install task that comes with angular-fullstack doesn't install bower components. It doesn't install anything. This error is trying to let you know that it can't find the bower_components directly, so it can't do its thing.
To fix the issue, run bower install.
If you don't have Bower installed, run npm install -g bower first.

I had the same issue, here's what worked in my case:
installed ruby and compass (yeoman needs these)
verified that path to Ruby bin folder is added to %PATH%
installed Git
restarted cmd window and ran "bower install" in the app folder
After that, grunt serve command worked perfectly.
Note: maybe installing Git and running bower install would suffice in your case.

I faced the same problem but only did npm install -g bower and then bower install and got grunt serve working.
I did not need to do any of the things mentioned by Olga.
Hope this helps.

npm install -g bower doesn't install bower components, you should run as well bower install to have all bower's components installed and then run grunt serve. It should work fine

Try to do bower install. If its failing saying not able to connect to git then you can change repo pointing location by simply running below command
$ git config --global url.https://github.com/.insteadOf git://github.com/
This will ensure that you will be downloaded over https instead of git if its causing orginasation firewall to block it.

In my case, I added sudo for it to work. So, I ran sudo npm install -g bowerand then bower install. grunt serve then worked when I ran it.

The Bower installation requires the packages to be brought from the Git repository, so first you need to install the Git application in your system. You can download it from this link :https://git-scm.com/downloads . Now after your have downloaded it , there may be a chance that the PATH may not be set up, so go to ControlPanel -> System and Security -> System -> Advance System Settings (on the left-hand side), click it, then goto Environment Variables -> System Variables -> PATH , click edit , and write down the following paths :
;C:\Users\admin\AppData\Local\Programs\Git\bin;
C:\Users\admin\AppData\Local\Programs\Git\cmd ....Well the above path is where Git was installed in my system, you can crawl to the place in your system where Git was installed and select the paths from the "bin" and "cmd" folder and paste it on the PATH variable.
Now, after the GIT path is setup, you can now type in the command " $ bower install " , this will install all of your bower packages.

npm install -g bower
bower install
grunt serve
worked for me ...

npm install -g bower
bower install
grunt serve
It's worked too

Related

$ yarn install leads to Cannot find module yarn-berry.js

New to react and am having trouble with the yarn install command where i get the following error:
Error: Cannot find module '/Users/MacPro/Desktop/Developer/React/.yarn/releases/yarn-berry.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
at Function.Module._load (internal/modules/cjs/loader.js:898:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 code:'MODULE_NOT_FOUND', requireStack: []
Anything related to the yarn function returns this error. Have tried uninstalling and re-installing through homebrew but always results in this. npm install -g yarn says it is updated and installed as well.
Any help?
Also, it worked fine a few weeks ago.
Thank you in advance.
Ok so I guess like me you did not read the whole Yarn documentation.
To get out of this:
Remove the .yarnrc.yml file in your project
Configure again Yarn 2: yarn set version berry
Configure your .gitignore file according to Yarn documentation: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
If like me, you do not want to commit 1000+ dependency files to your repository, add these lines to your .gitignore file:
.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*
After that, your commit should contain:
the updated .yarnrc.yml file (or none if the file did not change)
the .yarn/releases/yarn-berry.js file (maybe it is named otherwise like yarn-berry.cjs, the important thing is that this file matches what is contained in your .yarnrc.yml file)
I think that you tried to update your version of Yarn to version 2 by vaguely following (as I did) the tutorial here :https://yarnpkg.com/getting-started/migration
Maybe you realised you did not like Yarn 2 (no node_modules folder anymore... seriously Yarn?), uninstalled it, deleted different files manually, and now end up with this error (at least it was my case).
You are now trying to make a clean install of Yarn 1 because you still prefer it to npm (as I do) and you end up getting those crazy errors telling Yarn is looking form something mentioning some Berry thing you can't find, this error :
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module '/Users/Username/.yarn/releases/yarn-berry.cjs'
You have to first make a complete uninstall of Yarn.
Based on what you used to install it :
npm uninstall -g yarn
or
brew uninstall yarn
Then, and this is the most important part, go to your Home folder (on Mac Only) and list the hidden folders with
ls -al
You will have two elements mentioning yarn :
.yarnrc.yml and .yarnrc
Type the following to remove them:
rm -rf .yarnrc
and
rm -rf .yarnrc.yml
Once done, go and make a brand new install of Yarn using npm or brew :
npm install - g yarn
or
brew install yarn
That should be it.
RU sure you have yarn installed globally? Try npm install yarn -g. If you are a Windows user just download yarn from its website named .msi file.
After you run yarn set version stable and you add nodeLinker: node-modules to the .yarnrc.yml file, you need to run yarn install again.
Then all the modules where found.

Package dependencies in NPM and Bower

First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.

grunt serve from a fresh Yeoman install returns - Warning: Task "serve" not found

After running yo angular and then cd'ing into the application's root folder (at same level as the app folder, gruntfile, package.json etc) I try grunt serve and I get the above error. Grunt won't start a server for me.
I have searched all over but couldn't find say to run npm install and bower install within the application's root directory, which I have tried but still the same error.
I've updated and checked bower/grunt/npm and they're all good.
Any suggestions please?
I think I have found a solution!
http://yang-wei.github.io/blog/2014/06/01/npm-install-issues-plus-angularjs-set-up/
Running sudo on all the installs causes issues on the NPM folder in the home directory. I needed to change permissions of all usr/local folders by running:
sudo chown -R $USER /usr/local
sudo chown -R `whoami` ~/.npm
npm install -g yo grunt-cli bower
Now I go through the process again and no more errors!
The above link also seems to be pulled together from a bunch of answers at
npm throws error without sudo
The Gruntfile.js is not present under app directory but the root directory, i.e. parent of the app directory.
You must run the grunt serve form the root directory, i.e. parent of the app directory.
I encountered similar error with "task --- not found" message.
I tried bitfidget's solution, but it couldn't help. It seemed to be different problem.
I updated yo and grunt-cli module like this:
npm update -g yo
npm update -g grunt-cli
and re-created whole project by "yo" command.
This solved the problem.
I hope this can be help for anyone.

Yeoman - Errors With Grunt Server Command

I already have npm and git installed on my Ubuntu machine.
I followed the instructions below when installing Yeoman and the generator-angular.
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower (step by step tutorial)
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
My ultimate goal is to lauch a simple app using twitter bootstrap, so I can take advantage of their pretty UI. :D
However, when I get to the portion to run grunt server (recently replaced by grunt serve), I get a rediculous number of errors:
I was previously suffering from the issue described below:
Cannot install yeoman because 'generator-karma does not satisfy its siblings peerDependencies
https://github.com/yeoman/yeoman/issues/1065
Luckily I was able to work around it by running npm uninstall -g generator-karma && npm install -g generator-angular and then sudo npm install -g yo grunt-cli bower.
However, now I've hit a wall with grunt appearing as if it's not installed at all.
Does anyone know if there is a specific location where grunt should be installed?
Should I install it globally (using -g)?
Should I not install it globally (using -g)?
I don't understand what I'm doing incorrectly, but it must be something fundamental because the process is intended to be automated and simple.
Any ideas?
This looks like something npm install would fix. Looks like some of your dependencies didn't install.
Try it first without -g.
The problem definitely has something to do with compass and ruby. I was able to quickly build an angular app using yeoman when I opted not to install compass/sass for the app when prompted after typing yo angular at the terminal. After following the suggestions in this post, the last error I got was the following error:
Warning: /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require': cannot load such file -- compass (LoadError) from /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require' from /usr/bin/compass:20:in 'block in ' from /usr/bin/compass:8:in 'fallback_load_path' from /usr/bin/compass:19:in '' Use --force to continue Although, --force doesn't help.
but fixed it by simply following these instructions.

How do I reference angular-latest installed by bower?

I have installed AngularJS using bower, by calling:
$ bower install angular-latest
Now I wonder how to integrate AngularJS into my html file. Apparently, there is neither an angular[.min].js file nor an index.js file as suggested by the bower documentation.
I can't imagine that I am the first person on earth to discover this problem, but unfortunately I did not find any clues on this on Google (but perhaps I only used the wrong terms for searching).
Any idea of how to include AngularJS?
Okay, I found the solution:
$ bower install angular
And everything is fine ...
What you installed with
$ bower install angular-latest
was only the latest source code. You need to actually build AngularJS.
First, you need to install all of the following dependencies if you haven't already:
Git
Node.js
Java
Grunt
Bower
Second, change into the angular.js directory.
Then, install node.js dependencies and bower components:
$ npm install
$ bower install
Finally, you're ready to build your package:
$ grunt package
In the resulting build directory, you'll find
angular.js — The non-minified angular script
angular.min.js — The minified angular script

Resources