AngularJS Tutorial – notes (1)

Random notes from following through the AngularJS tutorial here.

My first time (several months back) working through part of the tutorial I struggled getting node.js up and running on Windows. Useful thread and comments on this post here.

Installing on Mac OS X, no problems.

Useful Tutorial Steps – Tools Install and Setup

(not intended to be a comprehensive set of steps, just mainly for myself to backtrack and see what I’ve done so far in the tutorial)

Install git (already have)

Clone the tutorial source project:

git clone --depth=14

Download and install node.js from here.

npm install – install the development tools.Note: the tutorial is not specific where you run this, but you must run this inside the clones angular-phonecat dir.

Useful scripts setup with the tutorial project:

  • npm start : start a local development web-server
  • npm test : start the Karma unit test runner
  • npm run update-webdriver : install the drivers needed by Protractor (run this once, and first before running Protractor)
  • npm run protractor : run the Protractor end to end (E2E) tests

Interesting note: no issue with the default config on Mac OS X and running the dev server on port 8000. This was an issue on my Windows machine and needed to change the default port to something other than 8000.

Errors Starting npm run protractor

All the other scripts ran first time for me, but protractor would not start, giving an error about ELIFECYCLE. Seems similar to this issue. I ran these to steps:

npm update
npm run update-webdriver

but then the error changed to something more verbose, about couldn’t find an .exe file:

util.puts: Use console.log instead
Using ChromeDriver directly...
[launcher] Error: Could not find chromedriver at /Users/kev/angularjs/angular-phonecat/node_modules/protractor/selenium/chromedriver.exe

A quick Google found this issue, and the steps described by jpaljasma fixed the issue:

  • edited package.json in the root of the tutorial project, changed devDependencies.protractor to be “*”, removed node_modules, ran npm install and npm run update-webdriver

Now the e2e tests supplied with the project run as expected.

Getting started with the AngularJS tutorial on Windows – issues

Here’s a quick summary of specific issues and workarounds I’ve run into so far:

  • Running ‘npm install’ and get: “Error: ENOENT, stat ‘C:\Users\[user id]\AppData\Roaming\npm”

This appears to be something removed in the node.js Windows installer. If you create the npm dir in the location above, this fixes this issue, and/or running the node.js prompt with admin privs in Windows. Covered here.

  • Error: ENOENT, no such file or directory 'c:\[some path]\package.json'

The Angular.JS tutorial steps don’t mention that you need to cd into the cloned angular-phonecat dir after you’ve grabbed it from github. Maybe this would be obvious if you’re already familiar with node.js and npm, but cd’ing into the cloned tutorial dir fixes this issue for me. Similar to this issue.

  • ‘npm start’ throws errors re binding to and port 8000

I’m not sure if this was because something was already running on port 8000 on my Windows box, but similar to the comments on the logged comments here, if you follow the steps to edit the package.json file, you can change the bind address and/or port before starting the server. Changing from 8000 to 8080 seemed to fix it for me.