RequireJS and TypeScript name.d.ts

Viewed 457

I am trying to load the rest clients to use in a custom Azure Devops Dashboard Widget. In the Microsoft Documentation it show's the typescript example of

import RestClient = require("TFS/WorkItemTracking/RestClient");

// Get an instance of the client
var client = RestClient.getClient();

// Call a method on the client
// e.g. client.getResource(...).then(...);

to load a rest client. I attempted to follow this example and have put what I think should be a working code example below.

However, when the page loads, I get the following errors,

require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

For some reason, RequireJS appears to be trying to load javascript files for the types defined in the tfs.d.ts file.

I am aware that VSS.require() can be used, but I would like to try and use the format shown in the documentation.

Does anyone know what I am missing or how I can change it to fix this problem with loading the modules with RequireJS?


Edit

I forgot to mention, the library I am using is called the VSS Web Extension SDK. I installed it via the npm command, npm install vss-web-extension-sdk. The reason I am trying to use RequireJS with this library is because in the TypeScript section of the README, it points to using the AMD module.


Required code and config files

Test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="node_modules/requirejs/require.js" data-main="scripts/config.js"></script>
    </head>
    <body>
        <div class="widget">
            <h2 class="title"></h2>
        </div>
    </body>
</html>

config.js

requirejs.config({
    paths: {
        "VSS": "node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
        "TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts"
    }
});
require(["HelloWorld"]);

Note: When the line "TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts" is not there, the following errors are shown.

require.js:1961 GET https://localhost:5500/scripts/TFS/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

HelloWorld.ts

VSS.init({                        
    explicitNotifyLoaded: true,
    usePlatformStyles: true
});

import WidgetHelpers = require("TFS/Dashboards/WidgetHelpers");
import RestClient = require("TFS/WorkItemTracking/RestClient");
import { QueryExpand } from "TFS/WorkItemTracking/Contracts";

// Get an instance of the client
var client = RestClient.getClient();
WidgetHelpers.IncludeWidgetStyles();

VSS.register("HelloWorldWidget", function () {                
    return {
        load: function (widgetSettings) {
            var $title = $('h2.title');
            $title.text('Hello World');
            console.log(client.getQueries("Projects", QueryExpand.All));

            return WidgetHelpers.WidgetStatusHelper.Success();
        }
    };
});
VSS.notifyLoadSucceeded();

Compiled HelloWorld.js

define(["require", "exports", "TFS/Dashboards/WidgetHelpers", "TFS/WorkItemTracking/RestClient", "TFS/WorkItemTracking/Contracts"], function (require, exports, WidgetHelpers, RestClient, Contracts_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true
    });
    // Get an instance of the client
    var client = RestClient.getClient();
    WidgetHelpers.IncludeWidgetStyles();
    VSS.register("HelloWorldWidget", function () {
        return {
            load: function (widgetSettings) {
                var $title = $('h2.title');
                $title.text('Hello World');
                console.log(client.getQueries("Projects", Contracts_1.QueryExpand.All));
                return WidgetHelpers.WidgetStatusHelper.Success();
            }
        };
    });
    VSS.notifyLoadSucceeded();
});

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "scripts",
        "module": "amd",
        "moduleResolution": "node",
        "types": [
            "vss-web-extension-sdk"
        ]    
    }
}
1 Answers

As Louis said, this can be done by using VSS.require to start everything.

My code currently looks a bit like this.

The Widget HTML file.

<head>
    <script src="../lib/VSS_Web_Extension/VSS.SDK.min.js"></script>
    <script src="../compiled_ts/WidgetInit.js"></script>
</head>

WidgetInit.js

// Initialize the VSS sdk
VSS.init({
    explicitNotifyLoaded: true,
    usePlatformScripts: true,
    usePlatformStyles: true
});

// Wait for the SDK to be initialized
VSS.ready(function () {
    //All my other code is in Widget.js and runs fine
    VSS.require(["src/compiled_ts/Widget"]);
});
Related