Modifying the <TypescriptModuleKind> setting for typescript transpilation in project.csproj is not supported in Visual Studio 2017

I recently encountered an issue with changing the module kind used by the transpiler in Visual Studio. Despite updating the <TypescriptModuleKind> in the project's project.csproj file from commonjs to AMD, the transpiler still defaults to using commonjs.

To replicate the problem, follow these steps:

  1. Install the necessary TypeScript addons - Typescript Tools, Typescript Build, and Rich Newman's Typescript HTML Application Template.
  2. Create a new project using the provided template.
  3. Check the project.csproj file to confirm that it contains 
    <TypescriptModuleKind>commonjs</TypescriptModuleKind>
    .
  4. Start the server and verify that the application runs without any errors.
  5. Edit the app.js file and notice how it is structured.
  6. Add the prefix export to the app.ts file and refresh the page to observe the error message exports is undefined.
  7. Update the tsconfig.json file to use "module": "amd" and re-transpile the TypeScript files.
  8. Verify the changes in the generated app.js file after the modification.
  9. Follow the provided link for further instructions on setting up requirejs.
  10. Test in the browser to ensure no errors are present.
  11. Rename or move the tsconfig.json file and restart the server to see if the error persists.
  12. Confirm that modifying the project.csproj file also leads to the same error.

This experiment demonstrates that Visual Studio may not be properly utilizing the tsconfig.json file or respecting its TypescriptModuleKind configuration value.

Further investigation into how Visual Studio handles TypeScript build configurations suggests that using the --module switch directly can yield more reliable results than relying on the project settings alone.

Is there a way to ensure that Visual Studio respects the tsconfig.json file and its specified TypescriptModuleKind setting?

javascriptvisual-studiotypescriptmoduletsc

Answer №1

I stumbled upon the solution.

Within the Project's Properties, I found a Typescript Build (side) tab where there is an option labeled Module System that I switched to 'AMD'. Success!

In a comment by @Chris Halcrow, it was suggested that by removing Typescript configurations from the project file, Visual Studio might refer to the settings in the tsconfig.json. Though untested, this method could provide additional configuration options beyond what VS offers.

I recently came across https://developercommunity.visualstudio.com/content/problem/24584/cant-compile-the-ts-files-on-vs2017-node-modules-n.html, which contains valuable insights on how Visual Studio handles typescript.

I also realized that @ChrisHalcrow was correct in mentioning that "if there's a tsconfig.json inside a project folder then the VS TS Config is ignored". I had overlooked the need to explicitly add the tsconfig.json file for Visual Studio to recognize it. In contrast to Eclipse and IntelliJ IDEA, Visual Studio requires manual addition of source files and configuration files. This realization added to the awesomeness of my discovery!

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

Using Express to request data from Mongo database and only receiving the path

I've been troubleshooting a websocket function that interacts with MongoDB to fetch some data stored in the system using 'get'. const User = require('mongoose'); const express = require('express'); const cal = require(&a ...

javascriptangularjsmongodbexpress

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js

Is there a way to execute browser.get just once in a script?

I'm completely new to protractor, and I've been setting up the browser.get(URL) command within my first 'it' statement. Then, in my afterEach statement, I navigate back to the homepage. I'm curious if there is a more efficient pla ...

javascriptangularjsautomationjasmineprotractor

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

How do I troubleshoot a TypeScript error when importing a custom font, such as a Google font? <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> Below is the specific error message: Type 'boolean' is ...

typescriptfontsnext.js

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

Recently, I have started delving into APS.NET MVC WEB API programming. My current dilemma involves creating an ASP.NET WEB API project with the following code: public class ValuesController : ApiController { // GET api/values public IEnumerable& ...

javascriptjqueryajaxasp.net-mvc-4asp.net-web-api

How does React-router handle component reloading when there is a change in the state of the parent component

Within my React application, I've integrated a ResponsiveDrawer component sourced from material-ui's demo. This component essentially displays a drawer containing a list of menu items, a title bar, and a content frame. The state of the component ...

javascriptreactjsreact-routerstatematerial-ui

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

javascriptangularjsnode.jsexpressmean-stack

What is the best way to retrieve the identity or specifics of the item that was right-clicked within the context menu

My AngularJS populated table includes a link button. When I right-click on this button, I've created a specific context menu using jQuery that pops up. The issue arises when I try to retrieve the ID of the item I clicked on in the context menu (such a ...

javascriptjqueryangularjs

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

What is the best way to create an Office Script autofill feature that automatically fills to the last row in Excel?

Having trouble setting up an Excel script to autofill a column only down to the final row of data, without extending further. Each table I use this script on has a different number of rows, so hardcoding the row range is not helpful. Is there a way to make ...

javascriptexceltypescriptoffice-scripts

Error: JSON encountered circular structure when attempting to serialize an object of type 'ClientRequest' with a property 'socket' that references an object of type 'Socket'

Encountering an error while attempting to make a POST request to my TypeORM API using axios: TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -&g ...

javascriptnode.jstypescripttypeorm

PHP file upload error: Angular JS form submission issue

I am currently working on creating an upload method using Angular and PHP. Here is what I have come up with so far... HTML <form class="well" enctype="multipart/form-data"> <div class="form-group"> <label for ...

javascriptphpangularjs

Trouble encountered with uploading files using Multer

I am facing an issue with uploading images on a website that is built using React. The problem seems to be related to the backend Node.js code. Code: const multer = require("multer"); // Check if the directory exists, if not, create it const di ...

reactjsnode.jstypescriptmulter

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

javascripttypescriptnext.jsjestjs

A simple program capable of holding two variables

To create a calculator, I want to implement a process where the user clicks buttons to input numbers into a display box. For instance, clicking 3 and then 2 should display as 32 in the input box. After that, if I click on the "+" button, it should remove t ...

javascriptjqueryajax

Sending data to server with Backbone (using save() function and php script)

Wondering if you can assist me with an issue I'm facing. I am trying to utilize Backbone's save() method and send data to a php file. However, I encountered a problem right at the beginning. When I execute the following in the browser's co ...

javascriptphpajaxrestbackbone.js

Exploring the internet with Internet Explorer is like navigating a jungle of if statements

I am facing an issue with my code that works well in Chrome, but encounters errors in IE. The if condition functions correctly in Chrome, however, in IE it seems like the first condition always gets executed despite the value of resData. Upon analysis thro ...

javascriptjqueryajaxinternet-explorergoogle-chrome

Looping through values in VueJS from 100 to 0

I am currently working on creating a power meter that will smoothly transition from 100 to 0 and back again to 100. The idea is for the user to press a button, causing the meter to stop at a random value. I just need some assistance in getting the loop fu ...

javascriptvue.js

Guide on linking action observables to emit values in sync before emitting a final value

If you're familiar with Redux-Observable, I have a method that accepts an observable as input and returns another observable with the following type signature: function (action$: Observable<Action>): Observable<Action>; When this method r ...

reactjstypescriptrxjsobservableredux-observable