临时修复：

Question

我根据以下文章在TypeScript中编写了一个相当大的AngularJS指令应用程序：http://kwilson.me.uk/blog/writing-cleaner-angularjs-with-typescript-and-controlleras/。

我已将控制器和指令组织到我的appm Controllers和Directives的子幻灯片中。

我的main.ts看起来像这样：

module Test {
    angular.module("myModule", ["myDep"])
           .controller(Test.Controllers)
           .directive(Test.Directives);
    }
}

我的_all.ts看起来像是

/// <reference path='Controllers/x.ts' />
/// <reference path='Directives/x.ts' />
/// <reference path='Controllers/y.ts' />
/// <reference path='Directives/y.ts' />
/// <reference path='Test/main.ts' />

在我尝试添加服务之前，一切都运行良好。

我在控制器x和y之间执行了一些重复的功能，并将它们放在Services

文件夹下的服务中

module Test.Services {
    export class TestService {

        test(): string {
            return "test";
        }
    }
}

将其添加到我的_all.ts

/// <reference path='Controllers/x.ts' />
/// <reference path='Directives/x.ts' />
/// <reference path='Controllers/y.ts' />
/// <reference path='Directives/y.ts' />
/// <reference path='Services/test.ts' />
/// <reference path='Test/main.ts' />

并尝试将其添加到我的应用中：

module Test {
    angular.module("myModule", ["myDep"])
           .controller(Test.Controllers)
           .directive(Test.Directives)
           .service("testService", Test.Services.TestService);
    }
}

我可以编译所有内容，而IntelliSense似乎接受它，但是当我渲染页面时，我得到了

Uncaught TypeError: Cannot read property 'TestService' of undefined

它似乎没有看到我的Test.Services模块，我无法弄清楚原因。它显然正在编译，我可以在已编译的JavaScript中看到服务。

如果我尝试做

console.log(Test.Services);

在main.ts中

，我得到undefined，但不是Controllers或Directives

如果我将我的服务移动到Test被调用的同一模块angular.module，它可以工作 - 但前提是它与angular.module调用处于相同的词法范围内。如果我将它保存在同一个单独的文件中，但在Test模块中，则不起作用。

我在这里很困惑。

Answer 1

我在这里很困惑

这是使用out的危险。查看为什么不应该这样做的原因：https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

临时修复：

重新排序_all.ts中的文件，以便按照使用顺序声明变量

长期修复：

在任何地方使用commonjs，并且前端有webpack运行。

TypeScript和AngularJS - 模块未定义？

1 个答案:

临时修复：

长期修复：