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!

https://i.sstatic.net/vz6aU.png

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!

https://i.sstatic.net/L8bQQ.png

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

Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...

javascripthtmlcss

Is there a way for me to configure my website so that when a link is clicked, my PDF file will automatically open in Adobe

I've been facing an issue where I need my users to access a specific PDF file from a link on my website. Currently, the PDF opens in a separate tab next to my site, but ideally, I would like it to be forced to open in Adobe Reader directly. Is this ac ...

javascripthtmlpdf

Building a dynamic attribute management system with vue and vuetify

In the backend business object, there is a custom attributes data structure that allows clients to add key/value pairs for storing in the database. For instance: Map<String, String> customAttributes; Here's an example of how it would look in th ...

javascriptvue.jsvuetify.js

How can I create a route using associations for /users/me in Sails.js?

My primary model is called Accounts. Additionally, I have several Has Many models such as Notifications and Friends Within my file named main.js, I would prefer to execute commands like: socket.get('/users/me/notifications'); instead of: soc ...

javascriptnode.jssails.js

Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

I have created multiple three.js objects. I have observed that the 'other' objects, designed as Mesh/Geometry/Material, update as expected after calling verticesNeedUpdate() Furthermore, I have two wireframe objects that were designed in this m ...

javascriptthree.js

Consistently Encountering The 404 Error

Greetings! Below is the code snippet from my app.js: var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require(& ...

javascriptnode.jsexpress

AngularJS Assessing an Attribute directive following an Element directive

Currently, I am utilizing an angular plugin that can be found at the following link: https://github.com/angular-slider/angularjs-slider The objective is to customize the "legends" produced by the directive. In order to achieve this customization, the dire ...

javascriptangularjsangularjs-directive

Vue.js is displaying API data in the browser's console, but it is not appearing on the webpage

I am currently learning about API design and attempting to make an API call that retrieves data from an online API server using the vue.js project through CLI. While I can see the results in the browser console, I'm encountering issues with displaying ...

javascriptvue.jsapi-design

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Uploading directly to AWS S3: SignatureDoesNotMatch error specifically for Internet Explorer users

My process involves using Amazon Web Service S3 for uploading and storing files. I create a pre-signed URL using the AWS SDK for Node.js on the server-side to enable direct file uploads from the browser through this signature URL. The Process On the serv ...

javascriptajaxnode.jsinternet-exploreramazon-s3

The custom service is failing to load, in the simplest terms possible

After creating a dataService.j that contains the following: angular.module('dataService', []) .service('gameDataService', function() { var _gameData = { loggedIn: "false", gameJoined:"false", tableFu ...

javascriptangularjs

I encountered an error when attempting to utilize a recursive type alias in a generic context

When attempting to use a recursive type alias in a generic function, TypeScript v3.7.5 throws the error message: Type instantiation is excessively deep and possibly infinite.(2589). type State = { head: { title: string; description: s ...

typescript

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

Tips for handling notifications that have been read and unread in a React application

In my current project using React JS, I am tasked with creating a notifications component that will display account-related activities. The notifications need to be sorted into read and unread categories. My main question is how should I manage the read a ...

javascriptreactjsnext.js

Control the HTML button's state according to the information received from the server

I am currently working with datatable Jquery and using an ajax call to retrieve data from the server. Let's assume that the database consists of three attributes: "Attribute1, Attribute2, Status". Depending on the Status attribute, I need to enable or ...

javascriptjqueryhtmlajaxdatatables

Having trouble getting autocomplete to work with JQuery UI?

Currently facing issues in implementing the Amazon and Wikipedia Autocomplete API. It seems that a different autocomplete service needs to be used based on the search parameter. Unfortunately, neither of the services work when adding "?search=5" for Wikipe ...

javascriptphpjqueryajax

What is the best way to incorporate TypeScript into a simple JavaScript project and release it as a JavaScript library with JSDoc for TypeScript users?

Issue: I have encountered difficulties finding an efficient solution for this. Here's a summary of what I attempted: To start, ensure that allowJs and checkJs are both set to true in the tsconfig.json, then include the project files accordingly. Ty ...

javascripttypescriptnpm

Vue 3: Leveraging Functions Within Mutations.js in Vuex Store to Enhance Functionality

In my mutations.js file, I have encountered a situation where one function is calling another function within the same file. Here's an example of my code: export default { async addQuestionAnswer(state, payload) { alert(payload); this.update ...

javascriptvue.jsvuejs3vuex

Encode image into base64 format without the need for file uploads

Is there a way to save an image in localStorage in base64 format without uploading it? I want to convert an existing image into base64. Can someone provide guidance on how to achieve this? function loadImageFileAsURL() { var filesSelected = document ...

javascriptjquerybase64

Ensuring child input components are validated upon submission using Vee-Validate and Vue.js 2

Currently, I am working on creating a Registration form with multiple "Input Field" components that require validation once the Submit button is pressed. While each input field validates individually when the text is changed, I am struggling to implement a ...

javascriptformsvalidationvue.jscomponents