在Angular 2中使用vss-web-extension-sdk [英] Using vss-web-extension-sdk in Angular 2

问题描述

我正在尝试使用angular 2和Typescript编写Visual Studio Team Services扩展，但是我努力失败了(我是Javascript，Typescript和Angular的相对Noob……)

我已经采取了几种方法，但是没有一条奏效.在为该程序包运行各种建议设置的设置之后(例如tsd install [大的依赖项列表]，然后是tsd链接)，失败后，尝试用npm install替换它们...这一切都归结为事实当我尝试在我的代码中引用它时，它不知道"VSS"是什么.

我试图从'vss-web-extension-sdk'导入{vss}，但是它说找不到名为"vss-web-extension-sdk"的模块.

我尝试从"vss-web-extension-sdk"作为VSS导入*，同样的问题.

好吧，我说，显然不是TS这样的模块实际上在告诉我，所以我尝试了'VSS'和'VSS/VSS'(发现是在vss.d.ts文件中进行的挖掘).

我进入了node_modules，它肯定在那里，但是对于如何使TS识别它是一件事情，我显然一无所知.

我知道问题是我不了解幕后情况.那里的任何Angular技工都能告诉我我做错了什么，也许可以教育这个可怜的菜鸟了解我不了解的情况下到底发生了什么?

我可能应该包括一些我想的代码.

在app.component.ts中导入尝试

import { VSS } from 'vss-web-extension-sdk';

我在package.json中的依赖项

  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "knockout": "^3.4.1",
    "q": "^1.4.1",
    "react": "^15.4.0",
    "reflect-metadata": "^0.1.8",
    "require": "^2.4.20",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "vss-web-extension-sdk": "^1.108.0",
    "zone.js": "^0.6.25"
  },

解决方案

请参阅以下步骤:

1. 创建Types.json

代码:

{
  "globalDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160929162922",
    "knockout": "registry:dt/knockout#0.0.0+20160914182733", 
    "q": "registry:dt/q#0.0.0+20161004185634",
    "require": "registry:dt/require#2.1.20+20160919185614",
    "tfs": "npm:vss-web-extension-sdk/typings/tfs.d.ts",
    "vss": "npm:vss-web-extension-sdk/typings/vss.d.ts"
  }
}

2. 运行打字安装命令以安装必要的软件包(在打字"文件夹中)
3. 打开您的打字稿文件和参考(例如///)

例如:

/// <reference path="../typings/index.d.ts" />
import Controls = require("VSS/Controls");
import VSS_Service = require("VSS/Service");
import TFS_Build_Contracts = require("TFS/Build/Contracts");
import TFS_Build_Extension_Contracts = require("TFS/Build/ExtensionContracts");

4. 创建tsconfig.json

代码:

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES5",
    "outDir": "dist/",
    "rootDir": "enhancer/",
    "moduleResolution": "node"
  },
  "files": [
    "[your ts file]"
   ]
} 

5. 运行tsc命令

您可以在以下文件中检查模块(例如VSS/控件):vss-web-extension-sdk \ typings \ vss.d.ts，tfs.d.ts，rmo.d.ts.

关于tsc编译器的工作流程，您可以参考此文章.

I am trying to write a visual studio team services extension using angular 2 and Typescript, and I'm failing hard (I'm a relative Noob to Javascript, Typescript, and Angular so...)

I've taken several paths, but none have worked. After running various flavors of the suggested setup for this package (e.g. tsd install [big long list of dependencies], followed by tsd link), and after failing, trying to replace them with npm install... it all comes down to the fact that when I attempt to reference it in my code it doesn't know what "VSS" is.

I tried to do an import {vss} from 'vss-web-extension-sdk', but it says it can't find a module named "vss-web-extension-sdk".

I tried import * as VSS from 'vss-web-extension-sdk', same problem.

Ok, I say, apparently that isn't actually a module like TS is telling me, so I tried 'VSS' and 'VSS/VSS' (found that digging through the vss.d.ts file).

I go into node_modules, and it is definitely there, but I apparently am clueless as to how to make TS recognize that it is a thing.

I know that the problem is that I don't understand what is going on under the hood. Any Angular mechanics out there that can tell me what I'm doing wrong, and maybe educate this poor noob on what is actually going on under the hood that I'm not grasping?

EDIT: should probably include some code I suppose.

import attempt in app.component.ts

import { VSS } from 'vss-web-extension-sdk';

my dependencies in package.json

  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "knockout": "^3.4.1",
    "q": "^1.4.1",
    "react": "^15.4.0",
    "reflect-metadata": "^0.1.8",
    "require": "^2.4.20",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "vss-web-extension-sdk": "^1.108.0",
    "zone.js": "^0.6.25"
  },

解决方案

Refer to these steps:

1. Create typings.json

Code:

{
  "globalDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160929162922",
    "knockout": "registry:dt/knockout#0.0.0+20160914182733", 
    "q": "registry:dt/q#0.0.0+20161004185634",
    "require": "registry:dt/require#2.1.20+20160919185614",
    "tfs": "npm:vss-web-extension-sdk/typings/tfs.d.ts",
    "vss": "npm:vss-web-extension-sdk/typings/vss.d.ts"
  }
}

2. Run typings install command to install necessary package (in typings folder)
3. Open your typescript file and reference (e.g. /// )

For example:

/// <reference path="../typings/index.d.ts" />
import Controls = require("VSS/Controls");
import VSS_Service = require("VSS/Service");
import TFS_Build_Contracts = require("TFS/Build/Contracts");
import TFS_Build_Extension_Contracts = require("TFS/Build/ExtensionContracts");

4. Create tsconfig.json

Code:

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES5",
    "outDir": "dist/",
    "rootDir": "enhancer/",
    "moduleResolution": "node"
  },
  "files": [
    "[your ts file]"
   ]
} 

5. Run tsc command

You can check modules (e.g. VSS/Controls) in these files vss-web-extension-sdk\typings\vss.d.ts, tfs.d.ts, rmo.d.ts.

About the workflow of tsc compiler, you can refer to this article.

这篇关于在Angular 2中使用vss-web-extension-sdk的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！