To deploy an angular project

user_9851619 0
Viewed 103

I am trying to develop a vss web extension with angular...

I should refer a html file to create .vsix file.

But in angular, we use ng serve then our page is loaded in http://localhost:4200/ and I am in a big confusion how to upload a working vss-extension which is developed with angular.

By the way, I am able to successfully design basic html files and publish them without any problem.

Could you lead me what direction I should go?

angular azure-devops
1 Answers

You should use Visual Studio Services Web Extension SDK. Some steps for reference:

  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.

Also take a look at below links which maybe helpful:

user_53910650
Related