Typescript + RequireJs + AngularJs

Question

In my front-end I want to use typescript with requireJs and AngularJs

I got typescript working with angularjs, but when I want to add requireJs nothing is working anymore. I hope someone can help me here :)

This is basically my structure:

In my index file i am refering the main file as my requireJs starting point

</script><script src="/components/requirejs/require.js" data-main="/js/main">

This is my main.ts

///<reference path="types/collection.d.ts"/>

require.config({
    baseUrl: '/js/',
    paths: {
        angular: '/components/angular/angular',
        angularRoute: '/components/angular-route/angular-route'
    },
    shim: {
        'angular': {'exports': 'angular'},
        'angularRoute': ['angular']
    },
    priority: [
        'angular'
    ]
});

require( [
    'angular',
    'app/appsetup'
], function(angular, app) {
    'use strict';
    $(document).ready(function () {
        var $html = $('html');
        angular.bootstrap($html, [app.app['name']]);
    });
});

Last but not least my appsetup file, where i am loading my app:

///<reference path="../types/collection.d.ts"/>
/// <amd-dependency path="angular"/>

import controller = require("./../controllers/home/index");
import angular = require("angular");

export var app = angular.module('app', ['ngRoute'])
                        .controller('app.controllers.home.index', controller.HomeController);

return app;

Also Webstorm underlines angular in the require statement and says that it cant find it. Currently I am getting this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the de......0)

Do you guys know what I am doing wrong? Or do you have maybe some links to pages, where I can see how you can develop with these 3 technologies for large projects?

Answer 1

When typescript compiles it creates the define() function (for either requirejs or commonjs) based on the presence of either import or export. But notice that import and export work only on typescript modules not simple js files. You can do something like this

import myimportmodule = require("myimportmodule");

Where your import module was

export module myimportmodule
{
   export class Test
   {}
}

And you can't do something like this.

import angular = require("angular");

simply because angular.js is not a typescript module.

look at the code below

/**
 * Created by Costa on 4/19/2014.
 */
///<reference path="../ts_references/reference.ts"/>


///<amd-dependency path="angular"/>

//register controllers

import ImportMainCtrl = require("controllers/import/importMainCtrl");
export module Controllers
{

    var angular:ng.IAngularStatic = require("angular");
    var ControllersAM:ng.IModule;
    ControllersAM = angular.module('controllers', []);
    ControllersAM.controller(ImportMainCtrl);
}

Notice this line?

///<amd-dependency path="angular"/>

it will add a dependency into the define function so the js file looks like this:

/**
* Created by Costa on 4/19/2014.
*/
///<reference path="../ts_references/reference.ts"/>
define(["require", "exports", "controllers/import/importMainCtrl", "angular"], function(require, exports, ImportMainCtrl) {
    (function (Controllers) {
        var angular = require("angular");
        var ControllersAM;
        ControllersAM = angular.module('controllers', []);
        ControllersAM.controller(ImportMainCtrl);
    })(exports.Controllers || (exports.Controllers = {}));
    var Controllers = exports.Controllers;
});
//# sourceMappingURL=controllers.js.map

Thats why you need this

var angular:ng.IAngularStatic = require("angular");

To access angular functionality. Hope that helps. Edited---- Or you can do the following in either angular.d.ts or another .d.ts file if you really want to import it like this

declare module 'angular'{
    export var angular:ng.IAngularStatic;
}

this will create an external module declaration with the var angular inside and export it.