Compiling Typescript in Visual Studio 2015

If you’re writing your app in angular 2 using Visual Studio 2015, you might have to do some configuration in order to compile typescripts. Another way is to prevent VS to compile typescripts and use TypeScript Compiler (tsc) explicitly.

Here are the steps to prevent Visual Studio to compile your typescript code:

• Right Click the Project Name in Solution Explorer
• Click “Unload Project”
• Right click again on the Project Name and click “Edit <YourProjectName>.csproj”
• Add  following settings for Debug and Release:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
  </PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
</PropertyGroup>

Enable Visual Studio to Compile typescript files – Solution 1:

To enable Visual studio to compile typescript files, we need to add some instructions for Typescript compiler, one way to do this is to add a “tsconfig.json” file to the root folder. This file specifies the compiler options required by the typescript compiler.

Here is an example of tsconfig file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

To enable “Save on Compile” option, add “compileOnSave” to your tsconfig file.

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

If it still won’t work then please check following option in VS 2015 IDE.

Open Tools > Options > Text Editor > Project > Compile on Save. Check “Automatically compile TypeScript files that are not part of a project”. To enforce this setting, you need to close and re-open the Visual Studio.

Enable Visual Studio to Compile typescript files – Solution 2:

This is not as clean as the first solution. It requires some manual changes to the proj file. Also it doesn’t required tsconfig.json file. We will add the same options we added in the tsconfig to the proj file.

• Right Click the Proj Name in Solution Explorer
• Click “Unload Project”
• Right click again on the Project Name and click “Edit <YourProjectName>.csproj”
• Add  following settings for Debug and Release:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJs</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptCompileBlocked>False</TypeScriptCompileBlocked>
</PropertyGroup>


<PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJs</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptCompileBlocked>False</TypeScriptCompileBlocked>
</PropertyGroup>

• Clean and Build the solution.
• It will throw this error.

         error TS6063:Build:Argument for ‘–moduleResolution’ option must be ‘node’ or ‘classic’.

• In the project settings we needed to set the TypeScript Compiler moduleResolution parameter to “NodeJs” to make the compile-on-save work. The problem is that the TypeScript compiler when run during an MsBuild needs the moduleResolution setting to be set to ‘node’ for the TypeScript compiler. This seems to be a bug in the Visual Studio 2015 settings. To override and fix this – until a patch comes along – you need to also add the following to the bottom of your project file which will be executed during the build which will override the TypeScript compiler moduleResolution option to the setting it needs to run successfully.

<Project>
    ...
    <PropertyGroup>
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
    </PropertyGroup>
    ...
    <Target Name="FixTsBuildConfiguration" BeforeTargets="CompileTypeScript" >
        <PropertyGroup>
            <TypeScriptBuildConfigurations>$(
                TypeScriptBuildConfigurations.Replace("--moduleResolution NodeJs", 
                "--moduleResolution node"))
            </TypeScriptBuildConfigurations>
        </PropertyGroup>
    </Target>
</Project>

I prefer the first solution, as it is more cleaner and configurable. I hope, you will find this article useful. Feel free to leave your comments and suggestions.