CODEWITHSUNDEEP
angulartypescriptazure-devops
JesusIsMyDriver.dll
JesusIsMyDriver.dll

Reputation: 869

Using vss-web-extension-sdk in Angular 2

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"
  },

Upvotes: 1

Views: 1367

Answers (1)

starian chen-MSFT
starian chen-MSFT

Reputation: 33708

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"
  }
}
  1. Run typings install command to install necessary package (in typings folder)
  2. 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");
  1. Create tsconfig.json

Code:

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES5",
    "outDir": "dist/",
    "rootDir": "enhancer/",
    "moduleResolution": "node"
  },
  "files": [
    "[your ts file]"
   ]
}
  1. 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.

Upvotes: 3

Related Questions