Visual Studio not compiling TypeScript

Question

I have a Visual Studio project with a structure like so:

My tsconfig.json looks like:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "../wwwroot/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

However, VS isn't compiling the app.ts into the wwwroot folder.

What am I missing?

Solution 1

From within Visual Studio, Project > Properties > Build > ensure that the "Compile TypeScript on build" is checked:

Also, in your tsconfig.json you should specify a rootDir so that TypeScript knows where to look for *.ts files it should compile:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "../wwwroot/",
    "rootDir": "../wwwroot/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

The details are called out on the TypeScript page here and here.

Don't forget to actually build it. It isn't a file watcher scenario.

Solution 2

Try adding "compileOnSave": true to your tsconfig.json:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "../wwwroot/"
     },
     "exclude": [
        "node_modules",
        "wwwroot"
    ],
    "compileOnSave": true
}

It should compile every time you save now.

Solution 3

It could be a syntax error in the typescript file.

My solution was to roll back the .ts file until it compiled (i.e. the timestamps of typescript and javascript files were identical) and start to change the .ts file from there. If the timestamps are not identical after compiling the .ts file, then we know it is probably a syntax error. I had to compile after every change and check the timestamp.

The syntax error was unfortunately not shown anywhere so I had to rely on timestamps to determine whether a file was compiled or not.

I had Compile-on-save enabled in Visual Studio 2019

---

Below is an screenshot of FileExplorer where the .ts has an error. Notice the difference in timestamps.

Below is an screenshot of FileExplorer where the .ts file is complied into `javascript successfully. Motice the timestamps are identical.

Comments

[BanksySan]

Cheers David. It turned out the missing peice of my puzzle was that I didn't realise that it was triggered on build, I thought it was constantly watching the files.

[Vern Jensen]

Does Visual Studio actually use the settings in tsconfig.json?

[David Pine]

@VernJensen absolutely, if they are omitted then they rely on defaults.

[Martin Capodici]

That did it for me.

[Digitrance]

Worked for me too! Note: compilerOptions.noEmit must be removed or set to false for this solution to work.

[KVM]

I don't have this option in my asp.net project