AngularJS Seed, Bower, and NetBeans IDE 8
By Geertjan-Oracle on Apr 28, 2014
Pulling in project templates from online repos that we, that is, the NetBeans team, have no control over has pros and cons. One clear con is that when things change a lot in those online repos, we're basically screwed. We've had fun with that with Cordova as well over the past NetBeans releases.
And that's what happened recently when Bower was suddenly and mysteriously, from my point of view anyway, added to the fun that is the AngularJS Seed template. Now, whenever you pull the AngularJS Seed template, whether on your own via whatever means, or via the NetBeans template for this purpose, you'll find you have references to angular.js and angular-route.js that look like this, in the index.html file:
That's wonderful, assuming the project already has the above files in the above folders. But it doesn't. You need to set up Bower and then manually (or maybe the NetBeans infrastructure should do that for you) call "bower install angular" and "bower install angular-route" in the appropriate location in your project.
So, what I did to get it all working was:
- Uninstall 'nodejs' and uninstall 'npm'. And then I hunted through all the nooks and crannies of my system for any remaining artifacts, e.g., the '.npm' folder in your user directory, which I then also deleted. The reason? Well, Bower doesn't install if your version of nodejs is not one of the latest versions, hence a reinstallation of nodejs is needed, followed by a reinstallation of npm.
- Great. Now you can call 'npm install -g bower', which will then cause Bower to be installed correctly (all messages green in the command prompt). Make sure to include 'g', which means 'global', otherwise Bower will install into the directory where you run the command, instead of in the global location for all node modules. Then, before continuing, run 'bower' on the command line to make sure it works.
- Hurray. Then create a new HTML5 project in NetBeans IDE 8, while making use of the AngularJS Seed template.
- Now go to the command line, to the 'app' folder in the project you created above and then run 'bower install angular' and 'bower install angular-route'. You need to do this in the 'app' folder. You'll now end up with a folder called 'browser_components' in your 'app' folder, containing two subfolders with the JS and other artifacts for the references in the index.html file.
- Finally, tweak the index.html file so that there are no relative references anymore (needed if you're using the embedded browser, because the embedded server doesn't serve outside of the 'app' folder, which is maybe a limitation of that server that should be fixed):
And now everything is OK again. You can run the project as before and you have the start of your AngularJS application. Below you see the Files window, i.e., how things look on disk, followed by the logical view provided by the Projects window:
Related reading that I found helpful in getting the above put together:
Related issue and other comments: