Compilation of TypeScript in MSBuild is failing during the Docker build process, while it is successful in the Azure pipeline

I am currently working on containerizing an asp.net .net framework web application.

Most of it is functioning correctly. However, I have encountered an issue where my .ts files are not being compiled for some reason.

The build process runs smoothly in an Azure DevOps Pipeline but fails in the docker environment.

Upon checking the logs from the Azure DevOps build, I noticed the following entries...

Processing resource file "My Project\Resources.resx" into "obj\Prod\Resources.resources".
PreComputeCompileTypeScriptWithTSConfig:
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.1\tsc.exe   --project "D:\a\1\s\MyProject\tsconfig.json" --listEmittedFiles --listFiles --noEmit
CompileTypeScriptWithTSConfig:
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.1\tsc.exe   --project "D:\a\1\s\MyProject\tsconfig.json" --listEmittedFiles
WebCompile:
...

However, in my docker build, the log shows...

Processing resource file "My Project\Resources.resx" into "obj\Prod\Resources.resources".
WebCompile:
...

It appears that the typescript part is being skipped.

I am unsure about the necessary steps to rectify this issue as it was automatically taken care of in Azure DevOps without any additional configuration.

This is the msbuild command executed by Azure DevOps Pipeline...

"C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin\amd64\msbuild.exe" "D:\a\1\s\MyProject.sln" /nologo /nr:false /dl:CentralLogger,"D:\a\_tasks\MSBuild_c6c4c611-aa2e-4a33-b606-5eaba2196824\1.166.0\ps_modules\MSBuildHelpers\Microsoft.TeamFoundation.DistributedTask.MSBuild.Logger.dll";"RootDetailId=|SolutionDir=D:\a\1\s"*ForwardingLogger,"D:\a\_tasks\MSBuild_c6c4c611-aa2e-4a33-b606-5eaba2196824\1.166.0\ps_modules\MSBuildHelpers\Microsoft.TeamFoundation.DistributedTask.MSBuild.Logger.dll" /m /p:MvcBuildViews=true /p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="D:\a\1\a\\" /p:platform="any cpu" /p:configuration="prod"

And here is the command utilized in my Dockerfile

msbuild ./MyProject.sln -target:MyProject -p:TargetFrameworkVersion=v4.7.2  -p:Configuration=prod -p:DeployIisAppPath='Default Web Site' -m -p:MvcBuildViews=true -p:DeployOnBuild=false -p:PackageAsSingleFile=true /p:OutDir=/artifacts /t:Package

The Azure DevOps command seems to have more parameters defined, and I am unsure which specific one triggers the typescript compilation or if it's related to the msbuild options at all.

My Dockerfile uses the following base image...

mcr.microsoft.com/dotnet/framework/sdk:4.7.2

In case it's relevant, this is my tsconfig.json settings

{
  "compilerOptions": {
    "typeRoots": ["scripts/typings"],
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "none"
  }
}

If you require any additional information to provide a better understanding, please let me know. My project file is too extensive to include entirely, but I can share relevant sections if needed.

Answer №1

In my quest for a solution, I stumbled upon a method that may be beneficial to others facing a similar dilemma. While not claiming it to be the most efficient approach, it certainly gets the job done...

To begin with, I incorporated the specified nuget package into the project...

Install-Package Microsoft.TypeScript.MSBuild -Version 3.9.2

However, during the project build process, an error surfaced indicating the requirement of nodejs. In response, I introduced this dependency in my Dockerfile using the following commands...

ADD https://nodejs.org/dist/v12.18.0/node-v12.18.0-x64.msi ./node-v12.18.0-x64.msi

RUN msiexec /i node-v12.18.0-x64.msi AGREETOLICENSE=yes ADDLOCAL=ALL /qn

Subsequently, msbuild executed the TypeScript operations successfully. Notably, it utilized the js version of the tsc compiler as opposed to the .exe variant typically observed in Azure Devops. Despite this discrepancy, all files were compiled without any issues.

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

Adjust the colors of two elements by clicking a button's onclick event

As stated in the title, I have a button in the books component. When this button is clicked, the color of a div within the books component and another div in the navbar component should change. - Below is the code for the books component : export class Bo ...

Expanding a TypeScript type by creating an alias for a property

I am working on defining a type that allows its properties to be "aliased" with another name. type TTitle: string; type Data<SomethingHere> = { id: string, title: TTitle, owner: TPerson, } type ExtendedData = Data<{cardTitle: "title&qu ...

Using RXJS with the 'never' subject as the specified generic type

In my current Angular project, I am using RXJS and Typescript. The code snippet below shows what I have implemented: const sub = new Subject<never>(); My understanding is that the above line implies that any subscriber defining the 'next' ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

Using React to update the state of an array of objects

I'm faced with a challenge in changing the properties of an object within an array of objects at a specific index using a function: const handleEdit= (index) =>{ if(itemList[index].edit==true){ const copied=[...itemList]; const item2 = {...ite ...

Removing unnecessary files from a frontend npm package in a production environment: Best practices

Having trouble organizing the build process for my frontend web app created with Angular 2 and TypeScript. This is the structure I'm working with: / - dist/ <-- transpiled .js files - src/ <-- .ts files - assets/ - bower_components/ ...

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

I am currently working on my first Edit/Update form within a newly created NextJs application as I am in the process of learning the framework. I seem to be facing an issue where the form constantly posts back to the server and causes the page to refresh ...

Encountering a Next.js event type issue within an arrow function

After creating my handleChange() function to handle events from my input, I encountered an error that I'm unsure how to resolve. Shown below is a screenshot of the issue: https://i.sstatic.net/fWJA2.png I am currently working with Next.js. In React ...

Typescript libraries built specifically for unique custom classes

I am currently exploring the most effective method for creating a class library in Typescript and deploying it to NPM along with a definitions file. The classes within the library serve as models that are utilized by multiple RESTful services. Some of the ...

The HttpPut request code format is malfunctioning, although it is effective for another request

I'm struggling with a HTTPPUT request that just won't get called. Strangely enough, I have a similar put request that works perfectly fine for another tab even though both pages are practically identical. I've exhausted all options and can&a ...

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

What are the techniques for narrowing down this specific type in TypeScript?

Is there a way to modify the following code snippet to eliminate the need for as casting in order to pass the type check successfully? type SupportedHandlerType = string | number | Date type Handler<T> = (data: T[]) => void function example<T ...

Searching for client using mqtt.js in Angular2 with Typescript yields no results

I am facing a unique issue while trying to incorporate the mqtt.js library into Angular 2 using TypeScript. Below is my app.component.ts file: import { Component } from '@angular/core'; import * as mqtt from 'mqtt'; @Component({ sel ...

An automatic conversion cannot handle spaces and prohibited characters in Object keys

The AlphaVantage API uses spaces and periods in the keys. Their API documentation is not formal, but you can find it in their demo URL. In my Typescript application, I have created data structures for this purpose (feel free to use them once we solve the ...

The computed function is unable to find the property on the specified type

I am a beginner in TypeScript. I have encountered an issue with the code below, which runs perfectly fine in JavaScript but is not compiling here. export default { data: function() { return { data: [ 'Angular', 'A ...

Exclude specific fields when updating a document in Firebase using the update()

Currently, I am storing a class in Firebase by using the update() function. Is there a way to stop specific fields (identified by name) of the object from being saved to the Firebase database? It's similar to how we use the transient keyword in Java ...

The delay function in RxJS allows for waiting to return a value until a specific condition is met within a stream and

Currently, I am facing an issue with a method in my application that triggers a server request. This method has access to a stream from the redux-store and needs to execute a callback only when the result of the request is found in the mentioned stream. Th ...

Employing monaco-editor alongside typescript without webpack within an electron endeavor

I need help incorporating the monaco-editor into my electron project built with TypeScript. Using npm install -D monaco-editor, I installed it successfully and imported it with import { editor } from "monaco-editor";. Despite not receiving any mo ...

Employing Bazel in conjunction with Lerna and Yarn workspaces

It seems that a lot of people are currently utilizing lerna and/or yarn workspace. I'm thinking about either transitioning from them to Bazel, or perhaps integrating them with Bazel in conjunction with an example project for guidance. Take for insta ...

Isolating a type as a constant in Typescript within a .js file?

Within my .js configuration files, I have a tsconfig containing the property checkJs: true. A library called Terser includes the following type options: ecma: 5 | 2015 | 2016 | 2017 | 2018 | 2019 | 2020 Despite setting ecma: 2017 in my configuration file ...