Project Dependencies

This page seeks to document all the dependencies / tools used by our project along with the reason(s) why they are being used.

Managing Dependencies

Here's an easy way to manage our dependencies using npm-check-updates:

1. Install "npm-check-updates" globally: npm install -g npm-check-updates
2. Check your "package.json" for out of date dependencies: ncu
3. Optionally auto-update the versions in your "package.json": ncu -u

Other options for ncu can be found at: https://github.com/tjunnone/npm-check-updates

Updating Dependencies

When updating any dependencies, it is recommended to use ONE of the following, instead of directly editing the package.json file:

• ncu -u (This updates existings dependencies to latest version using npm-check-updates, see above)
• npm install [name] --save (This adds a new dependency to the dependencies list in package.json)
• npm install [name] --save-dev (This adds a new dependency to the devDependencies list in package.json)

AFTER updating any dependencies, please do a sanity check by running:

• npm run clean (Removes your existing `./node_modules' directory, and all dependencies installed there)
  • NOTE: On Windows, this may throw an error, even though it successfully removes the ./node_modules directory. This seems to be known issue in rimraf as noted here: https://github.com/isaacs/rimraf/issues/102
• npm install (Reinstalls all dependencies. If any errors or warnings are thrown, you should fix them)
• npm run build (Rebuilds our project. Again look for errors or warnings)

Dependency Lists

All app dependencies are pulled in via NPM package manager, see our package.json.

Per the Angular 2 dependency recommendations, our NPM dependencies are split into dependencies (core dependencies) and devDependencies (development dependencies) within the package.json configuration.

1. The dependencies section should include feature packages (e.g. Angular 2 itself) and polyfills

• Polyfills are Javascript packages that plug gaps in the browser's Javascript implementation. Angular requires certain polyfills (to support cross-browser compatibility and latest Javascript features). The polyfills that Angular 2 currently requires are listed at https://angular.io/docs/ts/latest/guide/npm-packages.html#!#polyfill-packages

2. The devDependencies section should include packages that help us develop/transpile the application. They do not need to be deployed with the production application.

Core dependencies (dependencies)

• angular2 - UI framework (obviously)
• angular2-express-engine - Required by Angular Universal
• angular2-hapi-engine - Required by Angular Universal
• angular2-universal (Angular Universal) - Provides server-side Javascript rendering (i.e. "universal" or isomorphic javascript) for Angular 2
• angular2-universal-polyfills - Polyfills for Angular Universal. Required by Angular Universal
• bootstrap - Provides Bootstrap CSS look and feel
• css - Required by Angular Universal
• es6-shim - Enables usage of ES6 (Javascript) functionality for browsers without native ES6 support. Required by Angular 2 and ng-translate
• express - Web framework for Node.js. Used by our src/server.ts
• ng2-translate - I18N (internationalization) library for Angular 2.
• parse5 - Required by Angular Universal
• preboot - Tool that allows you to record and playback any browser events that occur while the client-side application is loading. Angular Universal uses this to control a server-rendered page and transfer state to the client-side app.. Required by Angular Universal
• reflect-metadata - Enables dependency injection features via decorators. Required by Angular 2
• rxjs - Provides "observables" for asynchronous, event-based program flows. A polyfill for the "Observables specification" currently under approval by the committee who determines standards for the JavaScript language. Required by Angular Universal
• zone.js - Provides execution contexts for asychronous tasks, used for updating the view. A polyfill for the "Zone specification" currently under approval by the committee who determines standards for the JavaScript language. Required by Angular Universal

Development dependencies (devDependencies)

• commander - module which allows you to build commandline interfaces to node.js programs. Used by our src/proxy.js to build a commandline enabled proxy.
• concurrently - used to run multiple npm commands/processes concurrently on Linux, Windows and Mac. Used in our scripts in package.json
• copy-webpack-plugin - Used in our WebPack build process, see webpack.config.js
• http-proxy - HTTP proxying library. Used by our src/proxy.js to provide a commandline proxy to REST calls (in order to provide CORS headers)
• nodemon - used to automatically restart the server when source code changes. See also our nodemon.json for configuration.
• rimraf - provides the Unix command rm -rf for Node / NPM. Used by our package.json to cleanup dist or node_modules directories.
• ts-loader - TypeScript loader for WebPack. Used in our webpack.config.js to process TypeScript files
• typedoc - Generates documentations from TypeScript comments (like JavaDocs but for TypeScript).
• typescript - The TypeScript language server and compiler/transpiler. We use the TypeScript language to build all UI components. See also our TypeScript Guidelines and our tsconfig.json configuration file.
• typings - Manager for all third-party TypeScript definitions. See also our typings.json for configuration.
• webpack - WebPack is a module builder. It essentially builds/transpiles our application (see webpack.config.js)
• webpack-merge - WebPack merge function. Used in our webpack.config.js to merge several module configs into one.