Visual Studio 2017 can't change project.csproj's <TypescriptModuleKind> for typescript transpiling

Question

This comes out of my answer at https://stackoverflow.com/a/48436147/1019307.

I need to change the module kind that the transpiler VS uses to be AMD. It defaults to commonjs even when the <TypescriptModuleKind> is changed in the project.csproj's from commonjs to be AMD.

To see the problem:

1. Add the typescript addons - Typescript Tools, Typescript Build and Rich Newman's Typescript HTML Application Template.
2. Create new project using the template
3. Observe the project.csproj contains <TypescriptModuleKind>commonjs</TypescriptModuleKind> and leave it like that
4. Start server. It starts fine and the application can be seen running (with no error messages in the developers console)

5. Open the app.js file and observe that it starts with:

   "use strict";      
   var Greeter = /** @class */ (function () {
       function Greeter(element) {
   

6. Open app.ts and prefix with export to make it export class Greeter {

7. refresh the page and observe the error exports is undefined in the developer console

8. Open the app.js file and observe it now says the following:

   "use strict";
   Object.defineProperty(exports, "__esModule", { value: true });
   var Greeter = /** @class */ (function () {
   

9. Create a tsconfig.json by running tsc --init

10. Observe that it contains "module": "commonjs"
11. Run tsc to transpile the ts files
12. Observe the app.js file is still as above (and would cause the exports is not defined error)
13. Change the tsconfig.json file so that it contains "module": "amd"
14. Run tsc to transpile the ts files

15. Open the app.js file and observe it now says the following:

      define(["require", "exports"], function (require, exports) {
          "use strict";
          Object.defineProperty(exports, "__esModule", { value: true });
          var Greeter = /** @class */ (function () {
    

16. Follow https://stackoverflow.com/a/48436147/1019307 to setup to use requirejs :-)

17. Refresh and observe it works in the browser and no errors are shown
18. Move the tsconfig.json out of the way by renaming eg to xxxxtsconfigxx.xxjson
19. Stop the server; modify the app.ts file to make it dirty; restart the server
20. Observe the exports is not defined error has returned
21. If you like, rename the file as tsconfig.json and repeat the last step and observe the error still exists. This confirms that VS does not use the local tsconfig.json for configuration.
22. Modify the project.csproj to contain <TypescriptModuleKind>amd</TypescriptModuleKind>
23. Stop the server; modify the app.ts file to make it dirty; restart the server
24. Observe the exports is not defined error has returned

Thus proving that VS does not honor the tsconfig.json file and seems to ignore its TypescriptModuleKind configuration value.

What are the TypeScript project build configuration options? seems to say how VS uses tsc. I ran using the --module switch and it worked correctly (eg. tsc --module commonjs [app.ts] and tsc --module amd [app.ts]). With [app.ts] being required if the tsconfig.json file doesn't exist. Thus it seems that VS is ignoring the TypescriptModuleKind setting or not applying it in the way that it should.

So what's the deal here. Is there any way to make it either use the tsconfig.json file or honor its TypescriptModuleKind setting?

Answer 1

I found the answer.

In the Project's Properties there is a Typescript Build (side) tab and there is a dropdown labeled Module System which I set to 'AMD'. And this worked! Awesome.

In a comment @Chris Halcrow suggested that if you take out the Typescript configurations from the project file then VS may use the configuration from the tsconfig.json. I didn't try it but definitely worth a try for the case where you need more options than what VS supplies.

---

I just found https://developercommunity.visualstudio.com/content/problem/24584/cant-compile-the-ts-files-on-vs2017-node-modules-n.html, which has some useful information on how VS deals with typescript.

I also realised that @ChrisHalcrow was correct when he said "if there's a tsconfig.json inside a project folder then the VS TS Config is ignored". I hadn't forced VS to recognise the tsconfig.json file. Once I added it again, it was seen. I forgot that VS needs to have things 'add'ed (source files, config files, ..). I'm used to Eclipe and IDEA seeing the changes and asking or just doing.

Even more awesome!