TypeScript "Compile on save" feature not working in Visual Studio 2015

Question

The "Compile on save" feature isn't working for me after upgrading to Visual Studio 2015. When I make a change to a .ts file in my project and save, the status bar at the bottom of the IDE says Output(s) generated successfully, but the generated .js file doesn't change.

Here's what I've tried:

adding the following to the root <Project> element in my .csproj:

<PropertyGroup>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>

checking and unchecking the "Automatically compile TypeScript files which are not part of a project" option in Tools -> Options -> TypeScript -> Project:
double checking to make sure "Compile on save" is checked in my project's TypeScript Build properties:

What am I missing?

As a side note, the TypeScript compilation step does work as expected when triggered by a regular build.

Check to make sure the JS files are NOT actually getting updated. I ran into an issue with VS2013 for awhile where the 'JS Preview' was not updating, but the JS files were actually updating. Manually open one to see if the code updated. The cause of this was unknown but the solution was to shut down VS and reopen it. I have not tried building any TS files in VS2015 yet. — Jason H, Aug 01 '15 at 04:45
They broke it for RTM. See this question http://stackoverflow.com/questions/31559653/vs2015-typescript-compile-to-single-file-on-save-not-working/31765536#31765536 — Simon_Weaver, Aug 02 '15 at 04:14
@alisabzevari Thanks for the suggestion, but running as administrator doesn't fix this issue for me. — Nathan Friend, Aug 03 '15 at 14:17

score 145 · Answer 1 · edited Jul 04 '17 at 14:49

145

For me it was this option in tsconfig.json:

"compileOnSave": true,
"compilerOptions": { ... },

Restart Visual Studio for this change to take effect.

edited Jul 04 '17 at 14:49

Marcos Dimitrio

6,651
5
38
62

answered Mar 15 '16 at 14:25

Miłosz Wierzbicki

2,082
1
13
15

Using angular2, updated my typescript amongst many other things for rc1 and naturally everything broke until I eventually found that this was my issue. Hadn't needed it until I updated to 1.8.10. – James May 20 '16 at 15:04
5

yes, add the option in tsconfig.json and reload the project if the project is hosted in a VS solution. Then ts will be compiled to js on save. – ZZZ Jun 05 '16 at 10:58
1

Adding `"watch": true` to `compilerOptions` worked for me on Visual Studio 2015 Update 2 with Typescript 1.8.29.0 – Vahid Amiri Jun 26 '16 at 04:32
1

At some point around the time of TypeScript 2, Visual Studio shifted from keeping these settings in the `.csproj` file to just using the `tsconfig.json`. If your project's properties TypeScript page is not disabled, it likely means you have an old version of the TypeScript tools for Visual Studio installed and you should install https://www.microsoft.com/en-us/download/details.aspx?id=48593 – cchamberlain Jan 20 '17 at 21:35

score 33 · Answer 2 · edited Oct 18 '18 at 23:18

I stumbled upon this problem today: I fixed that by using the new "watch":true compiler option, also available through JSON in most recent TypeScript versions:

{
  "compilerOptions": {
    "watch": true
  }
}

After doing that, I had to solve another issue related to the following error that appeared in the output window:

Object doesn't support property or method 'watchFile'

It turned out that my system was using an outdated version of TypeScript (1.0.x), despite I was sure I had a newer one that came with the Visual Studio 2015 Update 1 (1.7). If you run into this problem, you can easily check your tsc version by typing tsc -v from a command-prompt.

If it says 1.0.x or anything < 1.7, it's probably due to the fact that you have some old references in your PATH environment variable. Be sure you have 1.7 or later installed by checking inside your Microsoft SDKs folder, which is the one used by Visual Studio to install the TypeScript packages as they get updated:

C:\Program Files (x86)\Microsoft SDKs\TypeScript

If not, update accordingly. Open CPanel > System > Advanced > Environment Variables, select System Variables and click on Edit; browse through the list looking for any reference to the TypeScript folder, change one of them to make it point to your TypeScript most recent installed version (1.7 or above) and delete any other dupes. See also screenshot below:

For additional details, read this post on my blog.

For me on win10, the name in the list was "Path" and not system variables. When you select that (its value is a long semicolon-concatenated string), and then click edit you get the modal window shown in this answer. My solution was NOT to add compileroptions > watch > true, but to set compileOnSave > true (one step up from compileroptions) — BobbyTables, Apr 13 '16 at 08:22
For me, setting this option caused a build error JsErrorScriptException (0x30001). After searching, I came accross this issue https://github.com/Microsoft/TypeScript/issues/7362 . Miłosz Wierzbicki's solution (setting "compileOnSave") works for me, but only after restarting VS. — fikkatra, Apr 21 '16 at 14:30
I had the same problem. U and @zedd saved me lots of hours. This post is also helpful: http://www.ryadel.com/en/fixing-typescript-compile-on-save-feature-in-visual-studio-2015-asp-net-5-rc1/. — Dudi, Aug 18 '16 at 16:07

score 11 · Answer 3 · answered Jun 01 '17 at 11:39

Solution:

For me, and I am quite sure this is also the case for others, this was due to a mistake in the tsconfig.json.

You need to add "compileOnSave": true. But in the global section not inside compilerOptions.

Wrong:
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "compileOnSave": true

  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Correct:
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"

  },
"compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Best regards,

Anders Both Basechat.

score 6 · Accepted Answer · edited May 23 '17 at 10:31

6

This issue seems to have been resolved with the most recent update to the TypeScript Language Services extension.

See this answer for instructions on how to apply this update.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 17 '15 at 18:33

Nathan Friend

12,155
10
75
125

Yvan · Answer 5 · 2021-05-25T14:43:09.167

3

With typescript 2 you have to delete "outDir": from your tsconfig. Fixed the bug for me in visual studio.

edited May 25 '21 at 14:43

answered Oct 20 '16 at 08:49

Yvan

1,081
2
20
27

Where is the outdir tsconfig? Thx – jay May 08 '17 at 07:50
@jay You do not see the option in the configuration file tsconfig.json of typescript? – Yvan May 08 '17 at 12:45

score 2 · Answer 6 · answered Jan 18 '16 at 09:26

2

In my case, I had installed Visual Studio Community 2015 along side VS 2012. I had been using Web Essentials for typescript in 2012 which appeared to conflict with 2015.

Uninstalling Web Essentials in 2012 fixed the issue for me.

answered Jan 18 '16 at 09:26

Christopher Thomas

382
1
15

I'm using VS Community and uninstalling Web Essentials did the trick for me. Thanks and upvoted! – Ray Feb 04 '16 at 03:10

score 2 · Answer 7 · answered Feb 11 '20 at 02:14

Not sure if this will help anyone.

I though I was having issues compiling, but it was compiling on save. I just didn't have my solution explorer toolbar toggled to show all files.

The file was there, just waiting impatiently to be added to the project.

score 1 · Answer 8 · answered Aug 02 '16 at 04:42

1

In project properties -> "TypeScript Build", you can also simply just uncheck "Do not emit outputs if any errors are reported." Having it checked seems to deactivate transpiling on save, where there is an error or not.

answered Aug 02 '16 at 04:42

Dominic Williams

201
1
2

score 1 · Answer 9 · answered Feb 06 '17 at 22:16

1

The "compileOnSave": true, wasn't working for me. I finally figured out that Visual Studio doesn't honor the "compileOnSave": true, value if it is defined in another .json file that you're extending. It has to be in the root in order for it to work.

answered Feb 06 '17 at 22:16

Daryl

18,592
9
78
145

WasiF · Answer 10 · 2018-07-04T07:44:17.513

1

locate the file i.e. C:\file.ts in your terminal/cmd and type

tsc file.ts -w // watches for file changes and converts on save

edited Jul 04 '18 at 07:44

answered Dec 20 '17 at 05:19

WasiF

26,101
16
120
128

score 1 · Answer 11 · answered Nov 20 '19 at 09:26

Check if you have the TypeScript version installed which is configured in the project. Somehow I received no warning that I don't have TypeScript 3.7 installed, but the compile-on-save feature stopped working silently.

Once I installed TypeScript 3.7, it was working again.

score 0 · Answer 12 · answered Jul 03 '18 at 16:21

Exact same problem here. I am using Visual Studio 2015 update 3 and TypeScript 2.9.2.0. In tools/options/projects and solutions/external web tools, I upgraded $(PATH) to the second position. With all these configurations, compileOnSave: true doesn't work for me. The workaround solution is open a command line, run ng build --watch on the side and let node take care of auto compilation

score 0 · Answer 13 · answered Jul 17 '20 at 07:59

I had a similar but not the same issue in Visual Studio 2019

My project was set up to use TypeScript 2.9
I had TypeScript 3.8 installed, and the code did compile, but wouldn't compile on save

I installed the older version, TypeScript 2.9, restarted VS and then it burst into life

TypeScript "Compile on save" feature not working in Visual Studio 2015

13 Answers13

Linked