Error compiling AMD with typescript

Question

I am currently encountering a problem with my typescript compilation.

I am using the last version on OpenLayers (3.0.0 Beta 1) and I try to integrate it into my AMD modules. I precise that I am not really familiar with the AMD mechanism and typescript.

To manage my map, created thanks to OpenLayers3, i am creating a new module :

OlMap.ts

/// <reference path="../_import.ts" />

import ol = require('ol');

/*
*   Custom class used to wrap the OpenLayers Map class.
*   This is used to extend the functionnalities (i.e. controls)
*   Defined following the chaining method pattern.
*
*   @module OlMap
*   @class
*/
class OlMap {
      // My code here
}

To make easier the use of OpenLayers3 (that is not AMD), i created a definition file called ol3.d.ts that is referenced into my _import.ts

My problem is that when i try to compile this, i am getting the error :

OlMap.ts<3.1> error TS2071: Unable to resolve external module ''ol''
OlMap.ts<3.1> error TS2072: Module cannot be aliased to a non-module type.

The compile file looks like :

/// <reference path="../_import.ts" />
define(["require", "exports", 'ol'], function(require, exports, __ol__) {
    var ol = 'ol';

But it should be more like :

/// <reference path="../_import.ts" />
define(["require", "exports", 'ol'], function(require, exports, __ol__) {
    var ol = __ol__;

If i manually edit the javascript file generated like the previous code (var ol = __ ol__;) i have no dependencies problems, but the generated file creates errors due to the compilation error.

Any ideas ? Thanks

Edit : I am not integrating the OpenLayer javascript file into the HTML. OpenLayer is not an AMD library so, i am using the RequireJS's Shim.

Answer 1

I am assuming that you are including the openLayers3's JS file explicitly in your index.html (ie not using requireJS). In that case, you can solve the problem by creating a file with the name ol.ts in the root folder (where require looks for it) and puting the following in it:

/// <reference path="./path/to/ol.d.ts" />

export = ol;

This should re-exporte the OpenLayers's window.ol object in an AMD friendly way.

Answer 2

You need to declare it as an externally loaded module. ie:

declare module 'ol'{
    var openlayers:any;
    export = openlayers;
}

import ol = require('ol');


class OlMap {
      // My code here
}

Which generates:

define(["require", "exports", 'ol'], function(require, exports, __ol__) {
    var ol = __ol__;

    var OlMap = (function () {
        function OlMap() {
        }
        return OlMap;
    })();
});

Answer 3

Ok, i found a solution.

Instead of loading the OL3 from the concerned AMD module, i tried to load it at the application bootstrap as i did for AngularJS and jQuery. The shim mechanism looks working.

Nevertheless, i still don't know why the Typescript builder refused to compile my application. Thanks for your help.