The client is written using:

• AngularJS 2
• Typescript
  • With typings to create typescript wrappers for Javascript

Typings

We had to modify service_worker_api. Here are some details to using Typings:

To install initially

1. Locate - most likely in https://github.com/DefinitelyTyped/DefinitelyTyped - use find file function on the source tab

2. Install and save to the project's typings.json file with typings install dt~service-worker-api --global --save

3. After modification when you want to use your (forked) version. See for example https://github.com/GeoscienceAustralia/DefinitelyTyped/commit/5922786dcbe798fd2295ae94f682f953f45f044e.

   a. Edit typings.json file and add a line such as "service_worker_api": "github:GeoscienceAustralia/DefinitelyTyped/service_worker_api/service_worker_api.d.ts#5922786dcbe798fd2295 ae94f682f953f45f044e", # id:repository path#SHA

   b. typings uninstall service-worker-api --global

   c. typings install

GULP

Debugging

I first attempted to use https://github.com/s-a/iron-node and it seemed promising but seemed to hang. It allows an interactive debugger session just like the Chrome or Firefox development tools.

• See my attempt at using iron-node.

console.log

This works and prints to stdout - ie. the terminal when running a npm run build.prod

gulp-debug

The console.log doesn't work for gulp functions that return streams, such as gulp.src():

return gulp.src([
    join(APP_SRC, '**/*.ts'),
    '!' + join(APP_SRC, '**/*.spec.ts'),
    '!' + join(APP_SRC, '**/*.e2e-spec.ts')
  ])
  .pipe(gulp.dest(TMP_DIR));

Here you can use gulp-debug allowing you to change this to:

return gulp.src([
    join(APP_SRC, '**/*.ts'),
    '!' + join(APP_SRC, '**/*.spec.ts'),
    '!' + join(APP_SRC, '**/*.e2e-spec.ts')
  ])
  .pipe(debug())
  .pipe(gulp.dest(TMP_DIR));

Installing gulp-debug

1. Install the node-module:

   npm install --save-dev gulp-debug

2. Install the typing so it can be used from typescript:

   typings install dt~gulp-debug --global --save

3. Run the installer:

   npm install

4. Add the import to .ts files:

   import * as debug from 'gulp-debug';

5. add the pipe(debug()) as shown above.

Selective debugging

Using a switch --debug, passed to gulp from npm. It needs to be passed-through, so the command will be:

npm run build.dev -- --debug

Arguments parser

We use yargs. Install (first time and is now saved in gnss-site-manager):

npm install --save-dev yargs

typings install dt~yargs --global --save

.ts files

Add this to the .ts files:

import { argv } from 'yargs';

...

  let debug: boolean = argv.debug;

This has to be done in each .ts file individually (even the tools/tasks/project we define that are imported into the gulpfile.ts/js.