Using vss-web-extension-sdk in Angular 2

Question

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

Any luck making this work? Struggling with Angular-CLI and the Imports, since the Require-approach doesn't seem to work well with the Webpack one. — Matthias Müller

starian chen-MSFT starian chen-MSFT · Accepted Answer · 2016-11-23T09:08:47

Refer to these steps:

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

Run typings install command to install necessary package (in typings folder)
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");

Create tsconfig.json

Code:

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

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.

Using vss-web-extension-sdk in Angular 2

1 Answers