Unable to Add a TypeScript service to an Angular 1.X application

Question

I have created a TypeScript service named hello-world.ts in my Angular 1.X application. It looks like this:

export default class HelloWorld {
  hello() {
    console.log("hello world");
  }
}

I am importing it using the following:

import HelloWorld from './hello-world';
angular.module('exac.helloWorld', []).service('HelloWorld', HelloWorld);

When I pass the imported HelloWorld to console.log() in the above code snippet, I get an empty Object when I should be expecting a function.

Below is my relevant gulpfile config:

    // cache, packageCache, fullPaths are necessary for watchify
    var browserifyArgs = {
      cache: {},
      packageCache: {},
      // supposedly must be true for watchify, but false seems to work:
      fullPaths: false,
      basedir: 'app/source',
      // generate source maps
      debug: true,
    };

    var bundler = browserify('./index.js', browserifyArgs);

    // TypeScript support
    bundler.plugin(tsify, {noImplicitAny: true});

    bundler.transform('babelify', {
      extensions: ['.js', '.ts'],
    });
    bundler.transform('browserify-ngannotate');


    function bundle() {
      // If we process.cwd('app') here this will generate perfect source maps
      // even with includeContent: false; unfortunately, that affects the cwd for
      // all tasks in the gulpfile.
      return bundler.bundle()
        // log errors if they happen
        .on('error', console.log.bind(gutil, 'Browserify Error'))
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({
          loadMaps: true
        }))
        .pipe(sourcemaps.write('./', {
          includeContent: true,
          sourceRoot: '..'
        }))
        .pipe(gulp.dest('app/js/'));
    }

    gulp.task('js', bundle);

I have also tried the following:

// cache, packageCache, fullPaths are necessary for watchify
var browserifyArgs = {
  cache: {},
  packageCache: {},
  // supposedly must be true for watchify, but false seems to work:
  fullPaths: false,
  extensions: ['.js', '.ts'],
  basedir: 'app/source',
  // generate source maps
  debug: true,
  transform: [
    'babelify',
    ['browserify-ngannotate'],
  ]
};
var bundler = browserify('./index.js', browserifyArgs).plugin(tsify);

function bundle() {
...

Gulp watchify completes with no errors, but my browser generates the error angular.js:13920 Error: [ng:areq] Argument 'fn' is not a function, got Object.

As I wrote before, when I import the HelloWorld class from hello-world.ts, I am not seeing the expected value. Instead, I get an empty object. What is going on?

EDIT:

Here is the source code generated by browserify / tsify. Perhaps this holds a clue as to what may be wrong in my gulp / browserify / tsify environment?

System.register([], function (exports_1, context_1) {
    "use strict";

    var __moduleName = context_1 && context_1.id;
    var HelloWorld;
    return {
        setters: [],
        execute: function execute() {
            HelloWorld = function () {
                function HelloWorld() {}
                HelloWorld.prototype.hello = function () {
                    console.log("hello world");
                };
                return HelloWorld;
            }();
            exports_1("default", HelloWorld);
        }
    };
});