While attempting to create a VSTS (Azure Devops) Extension, I encountered a perplexing issue.
Within my HTML page, I have a button element with an onclick listener:
<!DOCTYPE html>
<head>
<script type="text/javascript">
VSS.init({
usePlatformScripts: true,
moduleLoaderConfig: {
paths: { "scripts": "scripts" }
}
});
VSS.ready(function () { require(["scripts/btn-controller"], function () { }); });
</script>
</head>
<body>
<button class="active" onclick="btnEvent(event, 'Action')">Button</button>
<input type="text" id="text">
</body>
</html>
The btn-controller.ts file:
function btnEvent(evt, NavTabButton) {
document.getElementById("text").innerHTML = "works"
}
Initially, everything worked smoothly. However, upon importing a module into the .ts file, I encountered an error stating that the function "btnEvent" could not be found.
import Extension_Data = require("VSS/SDK/Services/ExtensionData");
function btnEvent(evt, NavTabButton) {
document.getElementById("text").innerHTML = "should work"
}
I spent 2 hours researching this issue, but unfortunately, I was unable to find a solution.