angular - 如何将 SDK 链接到 DevOps Hub 扩展中的索引

问题描述

我正在尝试为 devops 制作一个 Angular 集线器扩展。我的问题是我不知道如何引用 VSS.SDK.min ...我按照 microsoft 网站上的文档进行操作，但无法使其正常工作

我试图制作一个简单的 hello Angular 应用程序。

这是我的 vss-extension.json：

{
    "manifestVersion": 1,
    "id": "theId",
    "publisher": "MyPublisherID",
    "version": "1.0.11",
    "name": "AngularTest",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "AnguTest",
                "uri": "dist/angularTest/index.html"
            }
        }
    ],
    "files": [
        {
            "path": "dist/angularTest/index.html",
            "addressable": true
        },
        {
            "path": "node_modules/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

这是我的Index.html：

<!doctype html>
<html lang="en">
<head>
  <script src="lib/VSS.SDK.min.js"></script>
  <script type="text/javascript">
   VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
        });
</script>
  <meta charset="utf-8">
  <title>AngularTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  </script>
</head>
<body style="background-color: red">
  <h1>Hello, <span id="name"></span></h1>
  <app-root></app-root>
</body>
</html>

当我尝试这样做时，我收到 2 个错误：
- 加载资源失败：服务器以 404 () 状态响应 VSS.SDK.min.js
- index.html:6 Uncaught ReferenceError: VSS is not defined at index.html:6（正常，因为服务器找不到js文件）

我只想显示索引页面。在那之后我想我会没事的！

标签： angularazure-devops

angular - 如何将 SDK 链接到 DevOps Hub 扩展中的索引

问题描述

解决方案

推荐阅读