Angular 10 DevOps 扩展 Rest Api

Question

我发现这非常有用 github project，这是使 angular 在 Azure DevOps 扩展中工作的概念证明。一切正常，直到我想使用 rest api 中的构建，例如“VSS/Service”或“TFS/VersionControl/GitRestClient”。我发现当我从 tsconfig.app.json 添加到包含时，我的 visual studio codium ide 识别我的组件中的类型 import { VssService } from 'VSS/Service'; 但是当我尝试构建文件时ng build 出现以下错误：

Module not found: Error: Can't resolve 'VSS/Service'

我尝试将 angular.json scripts[] 添加到 VSS.SDK.min.js 文件，但没有任何改变。

我看到 init-vss-angular.js VSS 已初始化，但我不知道 ide如何在我的 angular 应用程序中使用其余服务

regads

Answer 1

我可能错了，但我猜你的导入不是必需的。作者正在使用来自 core-services/devops-proxy/services 的 DevopsProxyService。查看 app.component.ts 文件，他使用 Angular DI 提供 DevopsProxyService.

ng build 在我这边工作正常:)

Answer 2

所以来自有用的 github wrote back to me and said he has another project 的人使用了 REST 服务。 以下是使用 angular 和打字稿在 DevOps 扩展中使用 DevOps RestServices 的简单解决方案。

vss-extension.json 在“文件”部分添加：

{
  "path": "node_modules/vss-web-extension-sdk/lib",
  "addressable": true,
  "packagePath": "lib"
},

在您的 extension.html 文件的 header 中包含：

  <script src="init-vss-angular.js"></script>
  <script>
    initialize();
  </script>

init-vss-angular.js:

function initialize(explicitNotifyLoaded, usePlatformStyles, usePlatformScripts, afterSdkReadyCallback) {
    appendScript('../lib/VSS.SDK.min.js').onload = function () {
        VSS.init({
            explicitNotifyLoaded: explicitNotifyLoaded || false,
            usePlatformStyles: usePlatformStyles || false,
            usePlatformScripts: usePlatformScripts || false
        });
    };

    function appendScript(scriptSource) {
        let scriptTag = document.createElement('script');
        scriptTag.src = scriptSource;
        document.head.appendChild(scriptTag);
        return scriptTag;
    }
};

在我的例子中，我想从 RestService 中检索所有的存储库，并且有一个神奇的方法可以回答我的问题。

http-client-factory.service.ts:

/// <reference path="../../../node_modules/vss-web-extension-sdk/typings/tfs.d.ts" />.
/// <reference path="../../../node_modules/vss-web-extension-sdk/typings/VSS.SDK.d.ts" />.

import { Injectable } from '@angular/core';
import { GitHttpClient } from 'TFS/VersionControl/GitRestClient';

@Injectable({
  providedIn: 'root'
})
export class HttpClientFactoryService {
  public retrieveGitHTTPClient(): Promise<GitHttpClient> {
    return new Promise((resolve: any, _: any) => {
      VSS.require(['TFS/VersionControl/GitRestClient'], (wit: any) => {
        const client = <GitHttpClient>wit.getClient();
        return resolve(client);
      });
    });
  }
}

并最终使用 http-repository.service.ts

获取存储库

/// <reference path="../../../node_modules/vss-web-extension-sdk/typings/tfs.d.ts" />.
/// <reference path="../../../node_modules/vss-web-extension-sdk/typings/VSS.SDK.d.ts" />.

import { Injectable } from '@angular/core';
import { HttpClientFactoryService } from './http-client-factory.service';
import { GitRepository } from 'TFS/VersionControl/Contracts';

@Injectable({
  providedIn: 'root'
})
export class HttpRepositoryService {
  public constructor(
    private httpClientFactory: HttpClientFactoryService) {
  }

  public async loadRepositories(): Promise<GitRepository[]> {
    const client = await this.httpClientFactory.retrieveGitHTTPClient();
    return client.getRepositories();
  }
}

感谢DrMueller提供原码

Angular 10 DevOps 扩展 Rest Api

Angular10 DevOps Extension RestApi

typescript

azure-devops

angular

azure-devops-extensions

azure-devops-rest-api