Question

我正在尝试为devops制作Angular hub扩展。我的问题是我不知道如何引用VSS.SDK.min ...我在Microsoft网站上遵循了doccumentation，但是我无法使其工作

我试图制作一个简单的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个错误：
-无法加载资源：服务器对VSS.SDK.min.js的状态为404（）进行了响应
-index.html：6未捕获的ReferenceError：在index.html：6上未定义VSS（正常，因为服务器找不到js文件）

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

Answer 1

只需将“ node_modules \ vss-web-extension-sdk \ lib”复制到扩展基础文件夹中即可。

Answer 2

我遇到了同样的问题，正在构建项目文件时出现问题，并且您html中的路径““ lib / VSS.SDK.min.js”没有指向您的javascript位置。

我的设置如下：

我的文件夹结构

|-- my-hub.html
|-- node_modules
    |-- ...
|-- sdk
    |-- scripts
        |-- VSS.SDK.min.js
|-- package.json
|-- vss-extension.json

我的HTML src = sdk / script / VSS.SDK.min.js不起作用。

我设法用简单的技巧解决了它： 1.使用开发工具（Chrome中的F12）查看用于查找js文件的路径，我切换到“网络”选项卡，并寻找您的VSS.SDK.min.js（类型=脚本），将鼠标悬停在。 js文件，就我而言，您将能够看到查找路径。我注意到这是一个“ baseurl ... sdk / hub / sdk / script / VSS.SDK.min.js”，因此，我修改了.html，我使用了“ src =“ ../../ sdk / script / VSS.SDK.min.js“

如何在DevOps Hub扩展中将SDK链接到索引

2 个答案: