CODEWITHSUNDEEP
typescriptrequirejsopenlayers-3amd
Adrien Saunier
Adrien Saunier

Reputation: 65

Error compiling AMD with typescript

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.

Upvotes: 1

Views: 637

Answers (3)

Adrien Saunier
Adrien Saunier

Reputation: 65

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.

Upvotes: 0

basarat
basarat

Reputation: 275819

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

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;
    })();
});

Upvotes: 1

musically_ut
musically_ut

Reputation: 34288

I am assuming that you are including the openLayers3's JS file explicitly in your index.html (i.e. 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.

Upvotes: 1

Related Questions