The files included in WebDeploy with TypeScript are incorrect

Starting a new MVC project in Visual Studio using TypeScript for frontend development has been an interesting journey. I decided to organize my TypeScript files in a folder called Frontend at the root of the project to avoid certain build issues that occurred when they were in the Scripts folder. With the help of the .tfconfig feature (introduced in version 1.8), I set the outDir to /Scripts/app. Everything builds and deploys smoothly on my local machine with IISExpress.

However, during a WebDeploy process from my CI server, I encountered failures due to missing files. The deployment was not just copying over js files from the Scripts directory, but also looking for corresponding scripts for every ts source file in the Frontend folder. This issue seems to be related to the WebDeploy process itself, as I haven't found a way to prevent it from including that directory or understand why it's searching there.

Answer №1

Dealing with the same problem while using Typescript 1.8 and Visual Studio Team Services (formerly Visual Studio Online) build CI. I came across similar discussions on Github, like this one and that one

The solution that worked for me was to delete the "outDir": "./Scripts" entry from the tsconfig.json file

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 statuses in Typescript React for conditional rendering instead of manually checking each individual variable

It's common for developers, myself included, to perform conditional rendering by checking variable values like this: import React, { useState, useMemo } from 'react' const Page = () => { const [data, setData] = useState<any[]>() ...

How do AppComponent and @Component relate to each other in AngularJs 2?

Recently, I came across the file app.component.ts in Example and found some interesting code. The link to the example is: here. Here's a snippet of the code: import { Component } from '@angular/core'; export class Hero { id: number; na ...

Form a tree structure using a compressed object

I’m struggling with a specific issue: I have an object structured like this: Object { id: string; parentId: string; } What I’m aiming for is a nested object structure like this: NestedObject { id: string; parentId: string; children: [ { ...

What is the best way to link a specific version of the @types package to its corresponding JavaScript package version?

Currently, I am in the process of working on a nodejs project with typescript 2.2 that relies on node version 6.3.1. My goal is to transition from using typings to utilizing @types. However, during this migration, several questions have arisen regarding th ...

When two-dimensional arrays meet destructuring, it results in a type error

Can anyone clarify TypeScript behavior in this scenario? JavaScript const test1 = [ ['a', 'b'], ['c', 'd'], ]; const test2 = [ ...[ ['a', 'b'], ['c', ' ...

Encountering a problem with Webpack SASS build where all files compile successfully, only to be followed by a JavaScript

Being a newcomer to webpack, I am currently using it to package an Angular 2 web application. However, I am encountering errors related to SASS compilation and the ExtractTextPlugin while working on my project. Here is a snippet from my webpack configurat ...

Transferring TypeScript modules for browserifying

Recently, I transformed my canvas library from plain JavaScript to TypeScript. I have structured the code using classes, all of which are part of the cnvs module. However, I am facing difficulties in compiling these classes into a single file. My goal is ...

Establishing connections to numerous databases using ArangoDB

I am currently developing a product that involves the dynamic creation of a new database for each project, as new teams will be creating new projects based on their specific needs. The backend of the product is built using Node.js, Express.js, TypeScript, ...

In Angular 9, what is the best way to refresh a component's data field in the DOM without having to reinitialize it?

Exploring Angular 9 for the first time and facing a challenge. I have a feature in my application where users can enter a name, submit it via a POST HTTP request to store the name. In another component, there is a sub-header that displays a list of stored ...

Typescript Array<String> useState Problem with IndexOf Function

Within my list component, I am required to maintain an array of strings for each element. These strings represent the checked status (via a checkbox) used to execute actions such as deletion. Additionally, I need to pass the links "themes/:id", which do no ...

Tips on incorporating express-mysql-session in a TypeScript project

I'm experimenting with using express-session and express-mysql-session in a Typescript project. Here's the relevant snippet of my code: import * as express from "express"; import * as expressSession from "express-session"; import * as expressMyS ...

Can custom types be incorporated into HTML templates in Angular 2?

Let's say we have an enumeration called CustomPages: export enum CustomPages{ page1 = 1, page2 = 2, page3 = 3 } Now, in our html template, let's try to access this enum. For instance: <a class="nav-link" [class.active]="page == Custo ...

Following the recent update to webpack-dev-server and webpack, certain modules are being requested that do not exist in the project

Recently, I made updates to my project that involved Vue.js and Typescript. After updating webpack and webpack-dev-server, I encountered a problem where certain modules were missing when attempting to run the project in development mode. Here is some addi ...

Arranging List Based on Date

I am looking to create a list that is grouped by date, similar to the image below. However, I am unsure how to implement this feature. https://i.sstatic.net/7vjz0.png You can see my code example and demo on Stackblitz app.component.html <div *ngFor= ...

What are some ways to control providers in targeted tests using ng-mocks?

I recently started utilizing ng-mocks to streamline my testing process. However, I am struggling to figure out how to modify the value of mock providers in nested describes/tests after MockBuilder/MockRender have already been defined. Specifically, my que ...

When setting up Webpack with TypeScript, an error is encountered related to imports

Recently, I attempted to convert my Webpack configuration from JavaScript to TypeScript but encountered numerous difficulties in the process. To kick things off, I created a basic webpack configuration file with some parts missing. Here is how my webpack.c ...

Side bar component header content in PrimeNG not displaying

Struggling to include a header in the PrimeNG sidebar component, but it doesn't seem to be functioning correctly. <p-sidebar [(visible)]="visibleSidebar1">   <ng-template p-Template="header"> <p>"He ...

The variable is accessed prior to being assigned with the use of the hasOwnProperty method

Continuing my journey from JavaScript to TypeScript, I find myself faced with a code that used to function perfectly but is now causing issues. Despite searching for alternative solutions or different approaches, I am unable to resolve the problem. Snippe ...

TypeScript encounters difficulty locating the div element

Recently attempted an Angular demo and encountered an error related to [ts] not being able to locate a div element. import { Component } from "@angular/core"; import { FormControl } from "@angular/forms"; @Component({ selector: "main", template: ' ...

Exploring the Contrasts Between TypeScript and TypeScript SDK

As a beginner in TypeScript, I am curious to know about the distinction between TypeScript and TypeScript SDK. Can someone shed some light on this for me, please? Many thanks! ...