Search code examples
javascripttypescriptdojorequirejsarcgis-js-api

Loading in a custom Typescript class through dojo not working


I've got a custom class that I'd like to kick off, using the Dojo loader. I seem close, but there seems to be an issue with what gets injected.

My dojoConfig points to the correct script, this works fine. If the typescript file includes JUST statements, it works, it fires off anything it contains.

var dojoConfig = {
    packages: [
        { name: "Viewer", location: "/scripts", main: "Viewer" }
    ],
    parseOnLoad: false
};

This is the code where I bring in the custom class. While I said it works fine if the typescript is just statements, when the typescript is a class, the line where I call the constructor doesn't error, but it also doesn't work. When I set a break point and inspect the viewer variable, it has a few arcgis related properties in it, so that leads me to believe there is something going wrong with the injection.

I require it to be constructed because I need to pass variables in on start up. Otherwise this really wouldn't be an issue.

        require([
            "esri/map",
            "esri/dijit/ElevationProfile",
            ...
            "dojo/domReady!",
            "Viewer"
        ], function(Map, ElevationsProfileWidget, Viewer) {
            Loader(Map, ElevationsProfileWidget, Viewer);
        });

        function Loader(Map, ElevationsProfileWidget, Viewer) {
            ...
            var viewer = new Viewer(false, false);
        }

This is the typescript class for context...

import TopNavToolbar = require("./TopNavToolbar");
import IdentifyTool = require("./IdentifyTool");

class Viewer
{
    topToolbar: TopNavToolbar;

    constructor(public AddMeasure: boolean, public AddIdentify: boolean) {

        console.log("constructed");
    }
}
export = Viewer;

And this is the JS it creates, if it necessary

define(["require", "exports", "./TopNavToolbar", "./IdentifyTool"], function (require, exports, TopNavToolbar, IdentifyTool) {
    "use strict";
    var Viewer = (function () {
        function Viewer(AddMeasure, AddIdentify) {
            this.AddMeasure = AddMeasure;
            this.AddIdentify = AddIdentify;
            this.topToolbar = new TopNavToolbar('ulToolbar');
            console.log("constructed");
        }
        return Viewer;
    }());
    return Viewer;
});
//# sourceMappingURL=Viewer.js.map

Solution

  • It ended up being something hilariously small. I was unaware that the require strings need to be in the same order as the function parameters that bring them in. So in this example, domReady would be binded to Viewer. Once I moved the Viewer require right under the ElevationProfileWidget, everything worked as expected

    require([
                "esri/map",
                "esri/dijit/ElevationProfile",
                "Viewer",
                "dojo/domReady!" 
            ], function(Map, ElevationsProfileWidget, Viewer) {
                Loader(Map, ElevationsProfileWidget, Viewer);
            });
    
            function Loader(Map, ElevationsProfileWidget, Viewer) {
                ...
                var viewer = new Viewer(false, false);
            }