Typescript AMD module Error (Module has not yet been loaded for context)

Question

I have the following Typescript file

/// <reference path="../../_references.ts" />
var app = require("modules/app");
var spactrl = require("controllers/spactrl");

var main = function (app: ng.IModule) {
    app.config(function ($routeProvider: ng.route.IRouteProvider) {
        $routeProvider.when("/", { controller: "HomeCtrl", templateUrl:"/spa/template/greet" });
    });
}
export = main;

but when I compile this into AMD, I get this output

define(["require", "exports"], function(require, exports) {
    /// <reference path="../../_references.ts" />
    var app = require("modules/app");
    var spactrl = require("controllers/spactrl");

    var main = function (app) {
        app.config(function ($routeProvider) {
            $routeProvider.when("/", { controller: "HomeCtrl", templateUrl: "/spa/template/greet" });
        });
    };

    return main;
});
//# sourceMappingURL=main.js.map

This results an error of 'Module name "modules/app" has not been loaded yet for context: _'

Going through requirejs's docs http://requirejs.org/docs/errors.html#notloaded

It looks like the generated file should either have my required "modules/app" or get rid of the dependency array all together.

Is there a work around for this? or am I doing something wrong?

Answer 1

I looked through your code and you are trying to load js modules via require calls. E.g. :

https://github.com/odytrice/RequireAngular/blob/dev/RequireAngular/Scripts/app/modules/app.ts

require("angular-route");
require("angular-resource");
require("angular-animate");

This will not work since TypeScript does not know about these require calls and cannot add this to the define section. To tell typescript about this you need to use the /// <amd-dependency

PS: I have a video on the subject : http://www.youtube.com/watch?v=4AGQpv0MKsA&hd=1

Answer 2

The usual way of working with AMD modules in TypeScript is to use import statements, as per the following:

import ng = require("pathto/ng");
import app = require("modules/app");
import spactrl = require("controllers/spactrl");

var main = function (app: ng.IModule) {
    app.config(function ($routeProvider: ng.route.IRouteProvider) {
        $routeProvider.when("/", { controller: "HomeCtrl", templateUrl:"/spa/template/greet" });
    });
}
export = main;

When you compile this using the --module amd flag, it will generate the nested require calls with your code placed inside as a callback.