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

Utilizing Azure Function Model v4: Establishing a Connection with Express.js

Using Model v4 in my Azure function index.ts import { app } from "@azure/functions"; import azureFunctionHandler from "azure-aws-serverless-express"; import expressApp from "../../app"; app.http("httpTrigger1", { methods: ["GET"], route: "api/{*segme ...

node.jstypescriptexpressazure-functions

Troubleshooting: Ngx-Echarts Animation Issue at Startup

I've been working on integrating ngx echarts into my Angular app, but I'm facing an issue with the animation during the initial load of the chart. Take a look at this Stackblitz example where you can see that the bars render quickly on initial lo ...

htmlangulartypescriptapache-echartsngx-echarts

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

I have a single datatable and was wondering how to implement tooltips for when hovering over table cells. I tried the following code snippet, which successfully populated the tooltips. However, I am interested in achieving the same functionality using Angu ...

javascriptangulartypescriptangular-datatables

Assigning to a constrained type with an indexable signature results in failure

When using typescript 4.7.2, I encountered an issue where the following code fails only when assigning a value: type IndexableByString = { [k: string]: any }; function test<T extends IndexableByString>(target: T, key: string) { var prop = target ...

typescript

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

Is there a way to automatically activate the Bootstrap-vue overlay when any child element makes a request, such as using axios? I am looking for a solution that will trigger the overlay without manual intervention. <b-overlay> <child> ...

typescriptvue.jsaxiosbootstrap-vue

The value of the filename property cannot be determined as it is undefined

Hey everyone, I'm currently working on a project using nestjs and reactjs. I encountered an error when trying to add a document that reads: "Cannot read properties of undefined (reading 'filename') in multer.config.ts" import { diskStorag ...

typescriptnestjs

Unexpected behavior in resolving modules with Babel (using node and typescript)

Within my node project setup, I utilize babel-plugin-module-resolver for managing relative paths efficiently. tsconfig.json { "compilerOptions": { "outDir": "build", "target": "es5", ...

node.jstypescriptbabeljseslintbabel-plugin-module-resolver

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Dealing with a paged API that requires fetching each page of results automatically has led me to construct a recursive promise chain. Surprisingly, this approach actually gives me the desired output. As I've tried to wrap my head around it, I've ...

javascripttypescriptrecursiones6-promise

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

javascripttypescriptgenerics

There seems to be an issue with the Typescript version compatibility in the node_modules folder for the Angular Material table cell component

While working on my project with Angular, I encountered an issue. I attempted to downgrade my TypeScript version to 3.9.7 but the problem persists. Below are the dependencies listed in my package.json: "private": true, "dependencies&qu ...

javascriptangulartypescriptangular-clitslint

The 'Key' identifier is not valid for indexing the 'Object' data type

Currently attempting to incorporate functional pluck with a specific sound type, but encountering an issue: function extract<Object extends {}, Key = keyof Object>(key: Key): (o: Object) => Object[Key] { return object => object[key]; } Erro ...

typescripttypestypescript2.0

A guide to implementing unit tests for Angular directives with the Jest testing framework

I am currently integrating jest for unit testing in my Angular project and I am relatively new to using jest for unit tests. Below is the code snippet for DragDropDirective: @HostListener('dragenter',['$event']) @HostListener(& ...

angulartypescriptunit-testingts-jestangular14

What could be causing my code to not run after subscribing to the observables?

In my code, I have two methods that return two lists: one for accepted users and the other for favorite users. The first part of my code works well and returns both lists, but in the second part, I need to filter out the accepted users who are also on the ...

angulartypescriptionic-frameworkobservable

Template literal types in TypeScript and Visual Studio Code: An unbeatable duo

I'm encountering an issue while attempting to utilize literal types in Visual Studio Code. When following the example from the documentation, https://i.stack.imgur.com/V6njl.png eslint is flagging an error in the code (Parsing error: Type expected.e ...

typescriptvisual-studio-codeeslinttypescript-eslint

Exploring Angular 4's capability: Incorporating data from Http Post Response into a .js file or highchart

I'm a beginner with Angular 4. I'm trying to create a dashboard that pulls data from an Http Post Response and I want to use this data to create a Chart (Highchart). I have successfully received the response in the console.log and formatted it i ...

angulartypescripthighchartshttp-post

A convenient utility for generating React components with pre-populated Tailwind CSS classes

When it comes to extracting local Tailwind-styled components, I tend to do it like this: const Container: React.FC = ({ children }) => ( <div className="bg-white px-5 py-5"> {children} </div> ); To simplify this process, I ...

reactjstypescripttailwind-css

Creating a fresh type in Typescript based on object keys that are already defined within an interface

Here is the scenario I am currently dealing with: interface ListField { code: number; message: string; } interface List { [key: string]: ListField; } export const allCodes: List = { FIRST: { code: 1, message: 'message 1', }, ...

typescripttypes

Testing a feature in Angular that modifies a variable

Trying to test a function that updates a Boolean variable has been causing some confusion for me. The strange thing is, even though the function seems to be called successfully when using the toHaveBeenCalled method, the variable itself never actually gets ...

htmlangulartypescript

Encountering an issue with compiling Angular due to a Type Inference error

interface Course { name: string; lessonCount: number; } interface Named { name: string; } let named: Named = { name: 'Placeholder Name' }; let course: Course = { name: 'Developing Apps with Angular', lessonCount: 15 }; named = ...

javascriptangulartypescript

Angular Error: The first argument has a property that contains NaN

Struggling with a calculation formula to find the percentage using Angular and Typescript with Angularfire for database storage. Encountered an error stating First argument contains NaN in property 'percent.percentKey.percentMale. The properties are d ...

angulartypescriptfirebaseangularfire2