Angular10 DevOps扩展RestApi

Question

我发现这个非常有用的github项目，它是在Azure DevOps的一个扩展中使角度工作的概念的证明。一切都很好，直到我想使用rest中的构建，比如"VSS/Service“或"TFS/VersionControl/GitRestClient”。我发现，当我从tsconfig.app.json中添加包含时，我的visual会识别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被初始化了，但是我不知道如何在我的角度应用程序中使用rest服务。

雷德

Answer 1

因此，来自乐于助人的github的人给我回信说他有另一个项目，它使用其他的服务。下面是一个简单的解决方案，可以在带有角和类型记录的DevOps扩展中使用DevOps RestServices。

.files在“文件”部分中添加：

{
  "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 itory.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提供的原始代码。

Answer 2

我可能错了，但我猜你的进口不是必需的。作者使用的是来自DevopsProxyService的core-services/devops-proxy/services。查看一下app.component.ts文件，他使用了角度DI来提供DevopsProxyService。

ng build在我这边工作得很好:)

​

​