Typescript AMD external module loading, angular is not defined

Question

I know that there are some similar questions on this topic already, but somehow none of them helped. I want to use angular.js in a project which uses requirejs and Typescript.

I have a module, where I use angular to create a service module:

/// <reference path="../../../typings/angularjs/angular.d.ts" />
...
var services = angular.module('services', []);
...
export = services;

This code compiles withouth error, but in the created js file, there is angular.js dependency is not there:

define(["require", "exports"], function(require, exports) {
...
}

And when I run the application, the browser complains: Uncaught ReferenceError: angular is not defined

My guess is, that somehow I should import the angular besides referencing it, but none of the path's I tried works.

Here is my require.js configuration, in case it is needed:

require.config({

    paths: {
        angular: '../lib/angular/angular',
        ...
    },
    shim: {
        angular : {exports : 'angular'},
        ...
    }
)}

Can u help me, what is missing here? Thanks.

Answer 1

When you use a reference comment:

/// <reference path="../../../typings/angularjs/angular.d.ts" />

You are telling the compiler "I will ensure this dependency is available at runtime".

If you want the module to be loaded, you need to use an import instead...

import angular = require('angular');

The zero-set-up way of doing this is to place the angular.d.ts file next to the actual angular.js file, so the path you specify in the import statement is the same either way - otherwise, use your require config to shimmy the path.

Answer 2

Have you tried adding the following to the top of your file

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

This should make ts compiler add angular to the define list.