1

I'm trying to create a VSTS/TFS extension which is based on an angular/cli app. I've created a new app using ng new and it compiles and serves fine. Now, my problem is referencing and consuming the vss sdk in my components.

I've made some changes based on the recommendations made here:

  1. Added "vss-web-extension-sdk" to package.json dependencies:

    "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "vss-web-extension-sdk": "^2.117.0", "zone.js": "^0.8.4" },

  2. Added the following typings.json file:

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

  3. Imported "VSS/Context"

    import * as VSS_Context from 'VSS/Context';

At this point the app builds with no errors, but when I try to consume the imported module, I get a build error: Module not found: Error: Can't resolve 'VSS/Context'

This is how I consume the imported module:

export class AppComponent {

title = 'app';

    constructor()
    {
        var ctx = VSS_Context.getDefaultWebContext();
    }
}

The entire app can be found at https://github.com/shaycy/tfs-ng-app

shayc
  • 121
  • 9
  • Try to refer to this article https://github.com/Microsoft/vss-web-extension-sdk – starian chen-MSFT Jul 26 '17 at 10:03
  • I've seem this article. It shows how to use the vss sdk from within the html but I could not find an example of using it from a .ts component. – shayc Jul 26 '17 at 11:41
  • I can build it with TSC command, but can't build through ng build command, what's the result of you? – starian chen-MSFT Jul 27 '17 at 05:32
  • I tried building that single component with tsc (command: _tsc src\app\app.component.ts_) and got the following errors: src/app/app.component.ts(2,1): error TS1148: Cannot compile modules unless the '--module' flag is provided. src/app/app.component.ts(2,27): error TS2307: Cannot find module '@angular/core'. src/app/app.component.ts(4,30): error TS2307: Cannot find module 'VSS/Context'. src/app/app.component.ts(6,1): error TS1205: Decorators are only available when targeting ECMAScript 5 and higher. – shayc Aug 07 '17 at 11:39
  • @starain-MSFT How did you build it? How can I build it through the _ng build_ command? – shayc Aug 07 '17 at 11:43

0 Answers0