Importing vss-web-extension-sdk modules in Angular-CLI components

Question

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