Execute TSC on the Hosted Build Agent

Currently, I am diving into TypeScript and have managed to create a basic app that I would like to deploy using VSTS on Azure App Service. My straightforward build definition involves the following steps:

  1. Utilize "Node Tool Installer (preview)" to set up Node 6.x
  2. Use "npm" to execute 'npm install' for essential dependencies such as TypeScript, jQuery, Bootstrap
  3. Employ "Command Line" to run 'tsc --project tsconfig.json'
  4. Deploy the app with "Azure App Service Deploy"

My issue arises during step 3 when the TypeScript compiler is triggered... An error occurs concerning the '--project' command line argument due to the fact that the Hosted build agent has TypeScript v1.4 installed while I developed the app using v2.5.3.

How can I ensure that the correct version of TypeScript is compiled to successfully transpile the application? It appears to be a simple challenge, but I haven't been able to find any solutions that don't involve a .NET project utilizing MSBuild & NuGet (which does not apply in this case: HTML, CSS, & TS converted to JS).

typescriptazure-devopsazure-pipelines

Answer №1

After successfully installing TypeScript in the project using npm install command, follow these steps:

  1. Include a script in the package.json file to execute the tsc command within the scripts section: 
    "tsc":"tsc -project tsconfig.json"
  2. Create an NPM task (Command: custom; Working directory with package.json: [path to package.json], for example $(Build.SourcesDirectory); Command and arguments: run tsc)

Answer №2

According to the VSTS official website, the latest offering for Visual Studio 2015 is "TypeScript 2.0.6."

https://learn.microsoft.com/en-us/vsts/build-release/concepts/agents/hosted

If you encounter any errors or wish to utilize a newer version of TypeScript, you can execute commands from your local machine by referencing the package.json dependency.

To access the TypeScript library package, simply enter:

node_modules/typescript/bin/tsc

You may also test this command locally to find out the installed TS dependency version:

node_modules/typescript/bin/tsc --version

I personally have projects employing TS hosted on Azure through VSTS, so it should be alright using the local TS version.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on validating an array of literals by leveraging the power of class-validator and class-transformer through the methods plainToInstance or plainTo

I am struggling with my validation not working properly when I use plainToInstance to convert literals to classes. Although the transformation appears to be successful since I get Array(3) [Foo, Foo, Foo] after using plainToInstance(), the validation does ...

typescriptclass-validatorclass-transformer

Using a variety of objects in TypeScript arrays

How to effectively implement a superior class in TypeScript for an array containing diverse objects that inherit from the same class, without triggering errors? This is my attempt: interface IVehicle{ modelName: string } interface ICar extends IVehi ...

javascripttypescript

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

I am currently unraveling the concept of closures in JavaScript. Within this code snippet, I am cycling through the values of the 'items' array using a foreach loop. I have defined a let variable named "count" outside the scope of the loop. Afte ...

javascriptreactjstypescriptclosures

The function webpack.validateSchema does not exist

Out of the blue, Webpack has thrown this error: Error: webpack.validateSchema is not defined Everything was running smoothly on Friday, but today it's not working. No new changes have been made to the master branch since Friday. Tried pruning NPM ...

javascripttypescriptwebpackwebpack-dev-server

Attempt to re-establish connection to server callback in Angular 2 upon encountering failure

tag, I have created an API parent class where all the necessary methods are implemented for server communication. The ApiService class is injected with Http and MdSnackBar services to handle HTTP requests and display snack bar messages. The get() method ...

angularapitypescriptcallback

What are the steps to globalize the ng-bootstrap datepicker?

For my current project, I am utilizing the ng-bootstrap datePicker component. The demo for my simple datePicker widget can be found here. However, I am now seeking to internationalize it by setting it to use the Russian language. Any assistance with this ...

javascriptangulartypescriptdatepicker

Each property of an object has its own unique key, yet they all share the same data type

I have a single-use object with only three properties, all of which should be of the same type. The code below currently achieves this, but I'm curious if there is a more efficient way to declare the type for timingsObject: let timingsObject: ...

typescriptobject

Unable to assign a value to a constant within the class constructor

I'm aware that in TypeScript, readonly properties can only be assigned a value within a class constructor. However, I encountered an error while trying to do so inside the constructor of my class, specifically related to an array method handler. class ...

javascripttypescriptclass

Struggling with TypeScript and JsObservable? Let us assist you!

Having previous experience with JSRender, JSViews, and JSObservables, I recently embarked on a new project using TypeScript. Unfortunately, I am struggling to understand how to properly utilize TypeScript in my project, especially when it comes to referenc ...

javascripttypescriptjsrenderjsviews

Observing changes in a parent component variable with Angular

One feature of my form is that it consists of a parent component and a child component. To disable a button within the form, I utilize a function called isDatasetFilesValid() which checks a specific variable (datasetList[i].fileValid). This variable is mo ...

javascriptangulartypescriptcallback

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

It seems that there are plenty of guides available on converting a file from .js to .d.ts, but not the other way around. Specifically, I have some code in .d.ts format and I would like to convert it into JavaScript. Can anyone offer assistance with this t ...

javascriptreactjstypescriptleafletgatsby

The 'RouterLink' JSX element type is missing any construct or call signatures

While researching this issue on the internet and Stack Overflow, I've noticed a common theme with problems related to React. An example can be found here. However, I am working with Vue and encountering errors in Vue's own components within a new ...

typescriptvue.jstypesvuejs3vue-tsc

The exploration of child routes and modules

I'm currently working on a somewhat large project and I've decided to break it down into modules. However, I'm facing an issue with accessing the routes of admin.module.ts. In my app.module, I have imported the admin Module. imports: [ Br ...

angulartypescript

The module cannot be located: Unable to find '../typings' in '/vercel/path0/pages'

Having trouble deploying my Next.js website through Vercel. It seems to be stuck at this stage. Can someone assist me, please? I've attempted deleting the node_modules folder and package-lock.json, then running npm install again, but unfortunately it ...

typescriptdeploymentvercel

Dependencies exclusively for NPM post-installUnique Rewrite: "N

I have been using git to distribute an internal TypeScript NPM package. To avoid cluttering my repository with build files, I have implemented a postinstall action to build the package upon installation: "postinstall": "tsc -p tsconfig.json& ...

typescriptnpmyarnpkg

What is the best way to trigger a method after an old component has been removed from the DOM while navigating within Angular

I am facing a challenge where I need to execute a method on ComponentB after a routerLink is clicked, causing the navigation from ComponentA to ComponentB. It is crucial that this method is triggered only after the entire navigation process is complete (i. ...

angulartypescriptangular-router

Is foreach not iterating through the elements properly?

In my code, I have a loop on rxDetails that is supposed to add a new field payAmount if any rxNumber matches with the data. However, when I run the forEach loop as shown below, it always misses the rxNumber 15131503 in the return. I'm not sure what I ...

javascriptarraystypescriptforeach

Encountering "Undefined error" while using @ViewChildren in Angular Typescript

In my application, I am facing an issue with a mat-table that displays data related to Groups. The table fetches more than 50 rows of group information from a data source, but initially only loads the first 14 rows until the user starts scrolling down. Alo ...

angulartypescriptundefinedviewchildren

TypeScript and Node.js: The type of 'this' is implicitly set to 'any'

Help Needed with TypeScript issue: An issue is arising in my TypeScript code related to a mongoose schema's post function. It is used to generate a profile for a user upon signing up, using the User model. Even though the code functions properly, th ...

node.jstypescriptexpressmongoosetypescript-typings

What is the best way to bypass TS1192 when incorporating @types/cleave.js into my Angular application?

Using cleave.js (^1.5.2) in my Angular 6 application, along with the @types/cleave.js package (^1.4.0), I encountered a strange issue. When I run ng build to compile the application, it fails and shows the following errors: ERROR in src/app/app.component. ...

javascriptangulartypescriptdefinitelytypedcleave