AngularJS

Development Web Server

$ npm start

npm

Initial Configuration

To create an initial package.json configuration for the project:

$ npm init

And answer the questions. More help here.

Then install each of the required runtime and development packages, but using either the --save or --save-dev options respectively. e.g.

$ npm install bower --save-dev

Updating Packages

Run npm update which will update the packages to the latest versions within the constraints of your package.json configuration.

Afterwards, run npm outdated for a list of packages that are older than the latest available.

Updating npm

To update to the latest version:

$ sudo npm install npm -g
$ npm -v

To update to a specific version:

$ sudo npm install npm@2.14.15 -g
$ npm -v

Have a look through the releases in GitHub to see what's available, or use npm view npm | more.

Searching for packages

$ npm search bower

View Package Details

$ npm view bower

Angular Seed Project

These examples are only relevant in an AngularJS Seed App Project which contains these named tasks which are defined in package.json).

Karma Unit Tests

Run continuously on file save:

$ npm test

Run once and exit:

$ npm run test-single-run

Protractor End-to-End Tests

$ npm run update-webdriver

The current version of the web driver is installed in node_modules/protractor/node_modules/webdriver-manager/selenium.

Subsequently:

$ npm run protractor

Trouble-shooting Protractor failing to start

You can try turning on debugging aids when running Protractor

$ yarn run protractor --verbose --stackTrace --troubleshoot --logLevel DEBUG

Try running Selenium standalone:

$ ./node_modules/webdriver-manager/bin/webdriver-manager start

Download a different version:

$ ./node_modules/webdriver-manager/bin/webdriver-manager --versions.standalone=3.141.59 update

Run with a specific version:

$ ./node_modules/webdriver-manager/bin/webdriver-manager --versions.standalone=3.141.59 start

Bower

Current Versions

The following command lists the local packages and any possible updates:

$ bower list

To update all the packages to the latest versions:

$ bower update

Information on a Bower Package

$ bower info angular

Updating Dependencies

To find the latest dependencies for your current Bower configuration, either run bower info package on each package or alternatively, change the version numbers to null in the bower.json configuration file. E.g.

{
  "name": "MyApp",
  "description": "My App",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "angular": null,
    "angular-route": null,
    "angular-loader": null,
    "angular-mocks": null,
    "html5-boilerplate": null
  }
}

See http://stackoverflow.com/questions/18815655/how-to-set-package-latest-version-in-bower

Useful Projects

Useful Tools

Using NPM as a build tool

http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

Trouble-Shooting

npm WARN optional dep failed, continuing fsevents@1.0.6

This is caused when installing Karma. It seems to be something that is only relevant to Mac OSX, so if on Windows/Linux, ignore.

TypeError: angular.$$minErr is not a function

When running angular-loader to asynchronously load angular scripts you see this error:

TypeError: angular.$$minErr is not a function
$routeMinErr = angular.$$minErr('ngRoute');

Ensure that angular.js is loaded first by placing its <script> element before the //@@NG_LOADER_END@@ tag. Then remove angular.js from the array of asynchronously loaded scripts.

See https://github.com/angular/angular.js/issues/9140

ChromeDriver

The version of ChromeDriver being used is controlled by the installed Protractor version. If a newer version of ChromeDriver than that provided by Protractor is needed, it can be updated by specifying the version of Chrome as a parameter to webdriver-manager:

$ webdriver-manager update --gecko=false --versions.chrome=76.0.3809.100

See https://github.com/angular/webdriver-manager/issues/351#issuecomment-476595330 for further information.

ChromeDriver releases are listed at http://chromedriver.storage.googleapis.com/index.html

See ChromeDriver Home

Unhandled promise rejection (rejection id: 1): Error: Failed to make Github request, rate limit reached.

If you're only using Chrome for Protractor tests, disable gecko with:

$ node ./node_modules/protractor/bin/webdriver-manager update --gecko=false

See https://github.com/angular/webdriver-manager/issues/307#issuecomment-377684918

HTML5 Mode

References

-- Frank Dean - 5 Jan 2016

Related Topics: NodeJS, DevelopmentSetup, LinuxDevelopment