How to prevent visual studio 2017 from build javascript?

Question

I upgraded today to VS2017, and I saw that every time I change something in my my web app project - the build build all my javascript again (I'm using webpack for client). It is cool, but it take a lot of time, so I'll be happy to configure it to stop building the javascript (and I'll build it myself just when it changed).

Answer 1

Simple Answer

In your csproj file, add the following line to the existing PropertyGroup block:

<PropertyGroup>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>

If adding .ts or .tsx files to your project causes your project file to be modified, you may need to apply the following fix. See the bug report for more details.

 <ItemGroup>
      <None Remove="**/*.ts;**/*.tsx" />
      <Content Remove="**/*.ts;**/*.tsx" />
      <TypeScriptCompile Include="**/*.ts;**/*.tsx" />
 </ItemGroup>

Add a tsconfig.json file to your project root and make sure the following setting is set:

"compileOnSave": false,

Finally, Restart Visual Studio

---

Details

Nuget creates a generated targets file called [ProjectName].csproj.nuget.g.targets in the obj directory of your project. This targets file is importing Microsoft.NET.Sdk.Web.ProjectSystem.targets which in turn imports Microsoft.TypeScript.targets.

In the Microsoft.TypeScript.targets file, the following line has a comment that lets us know that if this property is set to true, then the TypeScript compilation task will do nothing:

<!-- Makes the TypeScript compilation task a no-op -->
<TypeScriptCompileBlocked Condition="'$(TypeScriptCompileBlocked)' == ''">false</TypeScriptCompileBlocked>

Answer 2

I'm using webpack's ts-loader to compile and bundle my TypeScript files. So I no longer needed the automatic compilation that Visual Studio performed on each build. In Visual Studio 2017, I just commented out the following line from tsconfig.json to stop the automatic compilation:

"outDir": "./wwwroot/build/",

Answer 3

I had the same problem - Webpack was rebuilding my Typescript files every time Visual Studio rebuilt the project, despite having

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

in my proj file, and

"compileOnSave": false,
  "buildOnSave": false

in my tsconfig.json file.

Turns out it was because I had the NPM Task Runner VS extension installed (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner), and in Task Runner Explorer this had a build task bound to the 'Before Build' event. I didn't need this extension so I just uninstalled it.

Note: I didn't need Webpack to rebuild on VS build because I had it watching my files and rebuilding anyway as I made changes, via this extension: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner

Answer 4

Setting TypeScriptCompileBlocked to true was not enough for me. What worked was going to the project properties - there is a TypeScript Build tab where you can configure TS compilation, including the Compile On Save option:

It results in the following getting added to the csproj file:

<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptModuleKind>ES6</TypeScriptModuleKind>
<TypeScriptCompileOnSaveEnabled>False</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

Answer 5

Errors complaining about .ts files: I got build error when I tried to rebuild a VS2017 Web project that includes some typescript files. Error looked like these Error TS1005 (TS) '?' expected. C:\...\...project1 (tsconfig or jsconfig project) C:\\...\...project1 \node_modules\@storybook\addon-knobs\dist\type-defs.d.ts

No answers that really helped..so far: After spending hours searching up and down the Stack or else, I realized it could be as simple as to compare the errored project file to another one that also has typescript but no compile error.

It is simple..but it worked:

Here are the steps:

1. Unload the projects and edited Project file

2. Search "TypeScript" (exact case and exact word option) and found two Imports that matched:

   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

3. Then I went to the Project that did not have a problem compiling .ts files and look, it's different in the Condition:

   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="false" />

4. So I just replaced the Import with the one in 3) and reloaded the project and as expected, compiled successfully.

In the perfect world,Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" might just be exactly same as Condition="false" but there were not, even in my machine there is no such folder existing (C:\Program Files (x86)\MSBuild\15.0).

Sometimes, common sense helps more than deep knowledge, and this was that time.

Answer 6

In my case (Visual Studio 2017 15.9.25), I have to add the following property to .csproj

<PropertyGroup>
   <TypeScriptCompileOnSaveEnabled>false</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>

More details:

I read this article https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html and realize that VS will build TS based on the file Microsoft.TypeScript.targets.

And in this file, I see that it also bases on this property to control the Compile-on-Save TypeScriptCompileOnSaveEnabled. So setting this property to false in .csproj will stop the compile typescript when saving. (Please note that before doing this I already tried setting "compileOnSave": false in tsconfig.json file but it did not help)

Answer 7

Done the following setting along with TypeScriptCompileBlocked to true.

Set the below condition to false in .csproj file of the application.