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"
]
}
}