javascript - TypeScript サービスを Angular 1.X アプリケーションに追加できない

Question

hello-world.tsAngular 1.X アプリケーションで名前が付けられた TypeScript サービスを作成しました。次のようになります。

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

以下を使用してインポートしています。

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

HelloWorld上記のコード スニペットで import を console.log()に渡すと、関数が必要なときに空のオブジェクトが返されます。

以下は、関連する gulpfile 構成です。

    // 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);

私も次のことを試しました：

// 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 はエラーなしで完了しますが、ブラウザでエラーが発生しますangular.js:13920 Error: [ng:areq] Argument 'fn' is not a function, got Object。

前に書いたように、hello-world.ts から HelloWorld クラスをインポートすると、期待値が表示されません。代わりに、空のオブジェクトを取得します。何が起こっている？

編集：

browserify/tsifyで生成したソースコードはこちら。おそらく、これは私のgulp / browserify / tsify環境で何が間違っているのかについての手がかりを保持していますか?

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);
        }
    };
});