I have been writing a rather large AngularJS app of directives in TypeScript according to the following article: http://kwilson.me.uk/blog/writing-cleaner-angularjs-with-typescript-and-controlleras/.

I have organized my Controllers and Directives into subfolers of my appm Controllers, and Directives.

My main.ts looks like so:

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

my _all.ts looks like so

/// <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' />

Everything has been working great, until I attempted to add a service.

I took some duplicated functions between the controllers x and y and put them in a service, under the folder Services

module Test.Services {
    export class TestService {

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

added it to my _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' />

and attempted to add it to my app:

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

I can get everything to compile, and IntelliSense seems to accept it, but when I render my page, I get

Uncaught TypeError: Cannot read property 'TestService' of undefined

It doesn't seem to see my Test.Services module, and I can't figure out why. It is clearly compiling, I can see the Services in the transpiled JavaScript.

If I attempt to do a

console.log(Test.Services);

in main.ts, I get undefined, but not for Controllers or Directives

If I move my service into the same module Test that angular.module gets called in, it works - but only if it is in the same lexical scope as the angular.module call. If I keep it in the same separate file, but in the Test module, it doesn't work.

I am very confused here.