0

我hello-world.ts在 Angular 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给 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);
        }
    };
});
4

0 回答 0