I have a class in one file and I'm trying to create new objects from it that are loaded up in my E2E $httpBackend, but the browser can't seem to figure it out. The whole application doesn't load and this error appears in the console:

Uncaught TypeError: app.Challenge is not a function

The TyepScript compiler (I'm using WebStorm to auto-compile.) has no complaints and it compiles fine. The module with the class is like so:

module app {
  "use strict";

    // interfaces here

    export class Challenge implements IChallenge {

        constructor(public answerString: string,
                    public difficulty: number,
                    public id: string,
                    public language: languages,
                    public name: string,
                    public tests: ITest[]) {
        }
    }
}

And my mockBackend for my angular app is this:

module app.development {
    "use strict";

    angular
        .module("appMock", ["ngMockE2E"])
        .run(challengeResourceMock);

    challengeResourceMock.$inject = ["$httpBackend"];
    function challengeResourceMock($httpBackend: ng.IHttpBackendService): void {
        var challenges: app.IChallenge[] = [];
        var challenge: app.IChallenge;


        challenge = new app.Challenge( // <-- It says this is not a function!
            "runThisFunction = function(str) {\n\treturn str.split('').reverse().join('');\n}",
            1, "1", 1, "Reverse a String", [{
                description: "make sure it reverses the string (e.g. 'start' will become 'trats)",
                test: "function () {\n\tvar a = 'abcdef';\n\texpect(runThisFunction(a)).toEqual('fedcba');\n}"
            }]);
        challenges.push(challenge);

        // ...more challenges added to the list

        // get all challenges
        $httpBackend.whenGET("api/challenge").respond(200, challenges);

        // pass through requests for anything else
        $httpBackend.whenGET(/./).passThrough();
    }

}

How do I clear the error and get my app working with the mock backend?

UPDATE:

I've now removed the TypeScript modules. On basarat's advice I'm only using commonjs modules. I'm now using the ts-loader with webpack instead of WebStorm's compiler. I added a tsconfig file:

{
    "compilerOptions": {
      "target": "ES5",
      "module": "commonjs",
      "noImplicitAny": true,
      "outDir": "./dist/tsOutput/",
      "preserveConstEnums": true,
      "removeComments": true,
      "sourceMap": true
    },
  "exclude": ["node_modules", "trash", "coverage"]
}

Currently everything is in the global space, which isn't ideal but the application isn't big enough yet for there to be any conflicts. I'm, now, getting a slightly different error message, but the effect is the same. The application won't run.

Uncaught ReferenceError: Challenge is not defined

"Build" doesn't seem to be working. My IDE's inspector has no complaints. It's as if "class" isn't doing anything at all.

TEMPORARY HACK

Well, after fiddling for quite a while, I decided I was running out of time and decided to replace my Challenge objects with object literals.

module app {
    "use strict";

    angular
        .module("appMock", ["ngMockE2E"])
        .run(challengeResourceMock);

    challengeResourceMock.$inject = ["$httpBackend"];
    function challengeResourceMock($httpBackend: ng.IHttpBackendService): void {
        var challenges: app.IChallenge[] = [];
        var challenge: app.IChallenge;

        challenge = {
            answerString: "runThisFunction = function(str) {\n\treturn str.split('').reverse().join('');\n}",
            difficulty: 1,
            id: "1",
            language: 1,
            name: "Reverse a String",
            tests: [{
                description: "make sure it reverses the string (e.g. 'start' will become 'trats)",
                test: "function () {\n\tvar a = 'abcdef';\n\texpect(runThisFunction(a)).toEqual('fedcba');\n}"
            }]
        };
        challenges.push(challenge);

        // additional obj literal challenges    

        // get all challenges
        $httpBackend.whenGET("api/challenge").respond(200, challenges);

        // pass through requests for anything else
        $httpBackend.whenGET(/./).passThrough();
    }

}

Obviously, I must return to this issue in the future, but I'm further in my project for now.