Angular10 DevOps扩展RestApi

如何解决Angular10 DevOps扩展RestApi

我发现这非常有用github project，这是在Azure DevOps扩展中进行有角度的工作的概念证明。一切工作正常，直到我想使用rest api中的构建，例如“ VSS / Service”或“ TFS / VersionControl / GitRestClient”。 我发现，当我从tsconfig.app.json添加到include中时，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被初始化了，但是我不知道如何在我的角度应用程序中使用其余服务

regads

解决方法

我可能是错的，但是我的猜测是您不需要导入。 作者正在使用来自DevopsProxyService的{​​{1}}。看一下core-services/devops-proxy/services文件，他正在使用Angular DI提供app.component.ts。

DevopsProxyService在我这一边工作正常：）

,

因此，乐于助人的github的那个人给我回信说，他还有另一个project使用REST服务。 以下是一个简单的解决方案，可在带有角度和打字稿的DevOps扩展中使用DevOps RestServices。

在“文件”部分的

vss-extension.json中添加：

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

包括在extension.html文件的标题中：

  <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的原始代码。