The TFS build encounters issues with an Angular 2 application due to TypeScript errors, while the local build runs smoothly

I currently have Visual Studio 2015 with Update 3 installed on my machine. Within my solution, I have an Angular 2 application written in TypeScript. This application was included in the solution by following Angular's "5 minute quickstart" guide: https://angular.io/guide/quickstart

The Angular application is still in its early stages of development, and all configuration files were taken directly from the guide without any modifications.

While the solution builds successfully on my local machine, it fails to build on the remote build server during a TFS check-in. The errors I encounter during the MSBuild step are all TypeScript related:

  • Error TS2307: Build: Cannot find module '@angular/core'.
  • Error TS1219: Build: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning
  • Error TS2315: Build: Type 'any' is not generic.
  • Error TS1148: Build: Cannot compile modules unless the '--module' flag is provided
  • Error TS2304: Build: Cannot find name 'it'.

These errors just point to various parts of the Angular 2 app, totaling 29 errors. Interestingly, each error in the build log references the .csproj file containing the Angular application.

It seems that the TypeScript files should be compiled based on the tsconfig.json file configuration, rather than the Visual Studio project properties. Despite modifying the TypeScript configuration locally, it indicates that the properties are disabled due to the presence of the tsconfig.json file.

This discrepancy between local and remote builds leads me to believe that the remote build server may not be up-to-date and is not recognizing my tsconfig.json file.

Here is my tsconfig.json file for reference...

{
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
},
"compileOnSave": true
}

EDIT

Update: A recent discovery suggests that my tsconfig.json is not being read during the TFS build process.

Here is a comparison of the local MSBuild log versus the remote TFS build log...

Local MSBuild Log:
  C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe --project "C:\[MY PATH GOES HERE]\tsconfig.json" 
Remote TFS Build Log:
  C:\Program Files (x86)\Microsoft  SDKs\TypeScript\1.5\tsc.exe  --sourcemap --target ES5 --noEmitOnError COMPUTE_PATHS_ONLY 

It appears that the build server uses TypeScript 1.5, while I have 1.8 locally. Updating TypeScript on the TFS server should resolve this issue, as 1.8 offers improved support for tsconfig.json in Visual Studio.

Answer №1

It is important to ensure that the environment of your build server (build agent) matches that of your local environment to minimize the chances of build failures.

In this scenario, consider updating TypeScript from version 1.5 to 1.8 and reinitiating the build process. If the issue persists, attempt a manual build on the build agent machine instead of using TFS to determine whether the problem lies with the agent environment or the TFS build definition settings.

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

I'm encountering problems with downgrading packages in Angular 4

Recently, I inherited an Angular project from my company. Despite being new to Angular, I tried starting the project after running npm install. However, I encountered the error below and provided details of my package in hopes of receiving instructions to ...

Why is TS1005 triggered for Redux Action Interface with an expectation of '=>'?

I'm finding it difficult to identify what's causing this issue, as shown in the esLint error from Typescript displayed in the screenshot below: https://i.stack.imgur.com/pPZa7.png Below is the complete code, which consists of actions for redux. ...

Angular: Safely preserving lengthy content without the use of a database

As a beginner working on an Angular 11 educational website with approximately 20 static articles, I created a component template for the articles to receive text inputs. However, I am wondering if there is a more efficient way to handle this. Is there a ...

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated. Thank you. ts.file productList = [ { id: 1, name: 'Louis ...

RxJS failing to properly merge the outcome of a subsequent HTTP request

Currently, I have a searchbox that utilizes three separate search APIs. Users can input either a string or a number. The API returns results differently based on the input type: for strings, it may return up to ten results; for numbers, a second GET reques ...

Adding a separator for thousands on data labels in ng2-charts

Take a look at this demonstration: http://embed.plnkr.co/7fGsiuRjcF0M0Ffeoml2/ If I modify the data to be: data: [2000, 3000, 4000, 8000, 12000, 12850] Can I add thousand separators to the dataset label? For example: 5,000 10,000 15,000 ...

What is the best way to invoke a TypeScript function within a jQuery function?

Is it possible to invoke a TypeScript function within a jQuery function? If so, what is the correct approach? Here is an example of my component.ts file: getCalendar(){ calendarOptions:Object = { height: 'parent', fixedWeekCount : ...

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Utilizing .js libraries in my .ts project works seamlessly, with no issues arising. I have not utilized any *.d.ts files in my project at all. Could someone please explain how this functionality is achievable? ...

Cancel promise chain after action dispatch (rxjs)

My goal is to achieve the following: this.jobManager .queue( // initiate a job ) .then( // perform additional actions, but stop if `ABORT` action is dispatched before completion ) .finally( // carry out necessary ...

Angular 4: preventing button click until form validation is successful

I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...

Obtain the selected portion of text value using Angular 2

In order to create a basic text editor that allows users to make selected text bold, follow these steps: Start by setting up a textarea with the value "Super text". Next, select a portion of this text (such as "Super"). But how can you retrieve the selec ...

A guide to building a versatile higher-order function using TypeScript

I'm struggling with creating a function that can add functionality to another function in a generic way. Here's my current approach: /** * Creates a function that first calls originalFunction, followed by newFunction. * The created function re ...

Angular Typescript Filter failing to connect with service injection

I am having trouble accessing the Constant app within a filter in Angular TypeScript. How can I successfully access a service inside a filter? Module App.Filter { import Shared = Core.Shared; export class MilestoneStatusFilter123 { static $inject = ...

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

Troubleshooting compatibility issues between Sailsjs Services and TypeScript in Vscode

Having an issue with TypeScript in a Sails.js application. I am utilizing TypeScript to write my controller and attempting to use Sails.js services within the controllers. However, I encounter a syntax error in VSCODE. Below is the code snippet from MyCo ...

Preventing going back to a previous step or disabling a step within the CDK Stepper functionality

In my Angular application, there is a CdkStepper with 4 steps that functions as expected. Each step must be completed in order, but users can always go back to the previous step if needed. For more information on CdkStepper: https://material.angular.io/cd ...

Show the user's email in the page header using AngularFire2 version 4.0

Attempting to showcase the user's email in my header component following the AngularFire 2 version 4.0 upgrade guidelines: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md Header.component import { Component, OnInit } fr ...

Attaching an event listener to elements with a specified Class name

Currently facing a challenge where I am trying to implement a function that captures click events on squares. The objective is to capture the click event on every button with the square class. import { Component, OnInit } from '@angular/core&apos ...

Angular error: Attempting to create a property on an empty string using Rxjs

Currently, I am working with Angular 11 and using rxjs. I am trying to filter my course collection to show only courses with the category "frontend," but I am encountering some errors. Here is my code: getPosts():Observable<ICourses[]> { return ...

Angular: Retain the original value of the observable

When making HTTP requests to a backend and receiving data, I use an observable stream and subscribe to it in my HTML template using async pipe. However, I am facing an issue. I need to continuously send multiple requests by clicking a button, but I want th ...