Building ASP.NET MVC4 with TypeScript 2.x and experimentalDecorators using TFS 2015 xaml build process

Our TFS 2015 setup incorporates "old" xaml Builds and now I am looking to deploy an Angular 2 website with webpack.

I have successfully installed npm and compiled my project using webpack on the tfs by including a simple Target. Everything seems to be working fine as I can see my node_modules folder and the compiled wwwroot in the tfs temp directory.

 <PropertyGroup>
   <WebsitePath>$(MSBuildProjectDirectory)/../../Gui/Web/</WebsitePath>
   ...
</PropertyGroup>

<Target Name="npminstall">
 <Exec WorkingDirectory="$(WebsitePath)" Command="npm install" />
 <Exec WorkingDirectory="$(WebsitePath)" Command="npm run build:dev" />
</Target>

However, I encounter an error message from the TFS Agent when attempting to compile the .net dlls

Build: Experimental support for decorators is a feature that is subject to change in a future release.
Set the 'experimentalDecorators' option to remove this warning.

I remember facing a similar issue initially with VS and NG2 where I had to make some adjustments to my csproj file

<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'DevMvc|AnyCPU'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  .
  .
  .
</PropertyGroup>

Adding these lines resolved the compilation issue in Visual Studio. I've included these lines in my csproj again for the TFS build without success.

In Visual Studio, I currently utilize a tsconfig.json file

 {
  "compilerOptions": {
    .
    .
    .
  }
},

Could someone suggest a solution to enable successful compilation of this project on TFS 2015?

Note that TypeScript 2.0.6 is also installed on the Build Server.

Answer №1

During the transition from TFS 2010, we decided to keep our existing XAML Process Template rather than switching to a new one. To move forward with TFS 2015, all I had to do was select one of the updated XAML Build Process Templates available.

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

Transform Loopback 4 filter into a SQL WHERE condition

When using Loopback 4, the filter object that is received by functions like Get and Count appears as shown below: { where: { property: { op: value; } } } I am interested in converting this structure into an SQL WHERE clause to use it in ...

Retrieve Information in a List

I am currently facing an issue while trying to retrieve data from an array. Below is an example of the image array that I am working with. I am specifically looking to get the weather icon data, but unfortunately I encountered this error message: core.js:1 ...

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

As I delve into learning Angular with TypeScript, I've encountered some inconsistencies compared to JavaScript that are puzzling me. Take for example this function that works flawlessly with pure JavaScript, where it dynamically sets the min and max a ...

Is it possible to utilize both $uibModal and $uibModalInstance within the same controller to create a modal popup in an Angular project incorporating TypeScript?

Being new to Angular with Typescript, I encountered an issue while trying to implement a modal popup in Angular. The problem arises when I have a dropdown menu that triggers the opening of a modal popup with two buttons, "Yes" and "No". To handle this, I h ...

Strategies for obtaining the return type of a map and only including the type S

How can I retrieve the return type of map and only display S? const initialState = { x: 1, y: 2 } type InitialStateType = typeof initialState type MapGetter<S, R, R1> = { map: (state: S) => R mapB?: (state: S) => R1 // more ... } ...

Using GitHub Actions to automatically publish a Typescript Package: A Step-by-Step Guide

Utilizing GitHub actions, I have automated the process of publishing my npm package whenever I push code to the master branch. However, I am facing an issue with my .gitignore file where I have excluded the /dist/ folder. As a result, when the code is push ...

Different methods to prompt TypeScript to deduce the type

Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...

Step-by-step guide on how to index timestamp type using Knex.js

I'm in the process of indexing the created_at and updated_at columns using knex js. However, when I try to use the index() function, I encounter the following error: Property 'index' does not exist on type 'void' await knex.sche ...

What is the best way to merge the results of several runs of an observable function

When working with Firestore, I need to retrieve multiple documents, each with a unique sourceAddressValue. This means for a list of N strings, I may need to fetch N documents. I attempted the following approach: getLocationAddresses(addresses: string[]) { ...

There is no imageURL property available for this type

Everything was running smoothly on my local project, but encountered errors upon deploying to Vercel: The properties imageURL and alt do not exist on type {} Despite attempting to define the types based on suggestions from Stack Overflow, the issues per ...

Aligning validation schema with file type for synchronization

Below is the code snippet in question: type FormValues = { files: File[]; notify: string[]; }; const validationSchema = yup.object({ files: yup .array<File[]>() .of( yup .mixed<File>() .required() .t ...

Exploring the functionality of the Angular dist folder after building with multiple projects

In my current Angular project, I've divided the application into three separate applications for improved build time optimization - App1, App2, and App3. When testing locally, I individually build each project and then manually copy the main.js files ...

Utilizing the patchValue function in Angular 2 Reactive forms to update elements within an FormControl Array

I am currently working with a reactive form in my project: myForm = this.fb.group({ ... } and I have been updating fields using buttons and functions like the following: (click)="update('someKey', someValue)" The update function is struct ...

Is there a way to verify the presence of a room before transmitting a message to a socket?

sendToSpecificRoom(message: any): void { if(message.roomName){ this.io.sockets.in(message.roomName).emit("eventSent", message); }else{ this.io.sockets.emit("eventSent", message); } } I need to send a message specifically to the ...

Troubleshooting: Authentication guard not functioning properly in Angular 2 due to HTTP request

As I work on implementing a guard for certain routes in my application, I face an issue. To grant access to the route, my intention is to send an HTTP request to my express backend API and check if the user's session exists. I have explored various e ...

The 'XX' Typescript type does not match the type import ("/Volumes/D/test").XX.ts(2322)

I wrote a piece of code to customize the default configuration for a Class, but I encountered an unusual error message: Type 'IConfig' is not assignable to type 'import("/Volumes/D/www/js/tsc_1/test").IConfig'.ts(2322) It seems that I ...

Error message encountered: Typescript, Webpack, angular - Unable to execute due to TypeError: Object(…) does not operate as

Just starting out with TypeScript and Angular, I've been tasked with creating a typedefinition for a custom library. Despite confirming that the JavaScript from my external library is loading correctly in the resources, I encountered an error when cal ...

When deploying, an error is occurring where variables and objects are becoming undefined

I've hit a roadblock while deploying my project on Vercel due to an issue with prerendering. It seems like prerendering is causing my variables/objects to be undefined, which I will later receive from users. Attached below is the screenshot of the bui ...

Create a set of versatile input elements with Angular 9 and Material design for reus

Currently, I am in the process of developing a reusable input component using Angular 9 along with material design. My goal is to create something similar to the illustration provided below. https://i.sstatic.net/N1tCy.png TextboxComponent.html <mat- ...

Pass the previousItem to the click event handler within the *ngFor loop

Could I possibly retrieve the previous value of an item in an *ngFor loop when a specific event like click() is triggered? For instance: <myItem *ngFor="let data of dataList"> <div (click)="onClick(data, prevData)"> </myItem ...