Question

我在Angular 1.X应用程序中创建了一个名为hello-world.ts的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（）时，我得到一个空的Object，我应该期待一个函数。

以下是我的相关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);
        }
    };
});

无法将TypeScript服务添加到Angular 1.X应用程序

0 个答案: