Angular2 build failing in Visual Studio Team Services

Question

I am trying to build a solution (VS 2017 RC) which uses TypeScript 2.1. When it builds in Visual Studio Team Services it fails with the following error message (amongst many others)

C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe --project "C:\a\1\s\Angular\tsconfig.json"
[error]Angular\node_modules\rxjs\Observable.d.ts(29,33): Error TS1138: Build: Parameter declaration expected.

From a bit of googling it appears that this error occurs because of an outdated version of the transcompiler. How do I get VSTS to use version 2.1? is this even possible?

Here is my package.json file to clarify what I am doing:

{
  "name": "ng2-startvs",
  "version": "1.0.0", 
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jquery": "^2.0.34",
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.1.4",
    "typings": "^2.0.0"
  },
  "dependencies": {
    "@angular/common": "^2.3.0",
    "@angular/compiler": "^2.3.0",
    "@angular/core": "^2.3.0",
    "@angular/forms": "^2.3.0",
    "@angular/http": "^2.3.0",
    "@angular/platform-browser": "^2.3.0",
    "@angular/platform-browser-dynamic": "^2.3.0",
    "@angular/router": "^3.3.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-beta.12",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.2"
  }
}

My tsconfig is now this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

Here is my build definition:

 <?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <ProjectGuid>{B2A7EAE0-F8C3-4B1E-A3BB-F1F4ECB4A30D}</ProjectGuid>
    <ProjectTypeGuids>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
    <OutputType>Library</OutputType>
    <OutputPath>bin</OutputPath>
    <TargetFrameworkVersion>v4.5.2</TargetFrameworkVersion>
    <DebugType>full</DebugType>
    <DebugSymbols>true</DebugSymbols>
    <TypeScriptToolsVersion>2.1</TypeScriptToolsVersion>
    <UseIISExpress>true</UseIISExpress>
    <IISExpressSSLPort />
    <IISExpressAnonymousAuthentication />
    <IISExpressWindowsAuthentication />
    <IISExpressUseClassicPipelineMode />
    <UseGlobalApplicationHostFile />
  </PropertyGroup>
  <ItemGroup>
    <Service Include="{4A0DDDB5-7A95-4FBF-97CC-616D07737A77}" />
  </ItemGroup>
  <ItemGroup>
    <Content Include="app\app.component.css" />
    <Content Include="app\app.component.html" />
    <Content Include="index.html" />
    <Content Include="systemjs.config.js" />
    <Content Include="web.config" />
  </ItemGroup>
  <ItemGroup>
    <Content Include="package.json" />
    <Content Include="tsconfig.json" />
    <Content Include="typings.json" />
    <None Include="web.Debug.config">
      <DependentUpon>web.config</DependentUpon>
    </None>
    <None Include="web.Release.config">
      <DependentUpon>web.config</DependentUpon>
    </None>
  </ItemGroup>
  <ItemGroup>
    <TypeScriptCompile Include="app\app.component.ts" />
    <TypeScriptCompile Include="app\app.module.ts" />
    <TypeScriptCompile Include="app\main.ts" />
    <TypeScriptCompile Include="app\shared\models\counter.ts" />
    <TypeScriptCompile Include="app\counters\counter-insert.component.ts" />
    <TypeScriptCompile Include="app\counters\counter-edit.component.ts" />
  </ItemGroup>
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">12.0</VisualStudioVersion>
  </PropertyGroup>
  <PropertyGroup>
    <RootNamespace>AngularCounter</RootNamespace>
  </PropertyGroup>
  <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\WebApplications\Microsoft.WebApplication.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\WebApplications\Microsoft.WebApplication.targets')" />
  <ProjectExtensions>
    <VisualStudio>
      <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
        <WebProjectProperties>
          <UseIIS>True</UseIIS>
          <AutoAssignPort>True</AutoAssignPort>
          <DevelopmentServerPort>23097</DevelopmentServerPort>
          <DevelopmentServerVPath>/</DevelopmentServerVPath>
          <IISUrl>http://localhost:23098/</IISUrl>
          <NTLMAuthentication>False</NTLMAuthentication>
          <UseCustomServer>False</UseCustomServer>
          <CustomServerUrl>
          </CustomServerUrl>
          <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
        </WebProjectProperties>
      </FlavorProperties>
    </VisualStudio>
  </ProjectExtensions>
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

Answer 1

The highest version of TypeScript on Hosted Agent is 2.0.6.

Refer to these steps to deal that issue if you are using Visual Studio Build to build project:

1. Add/Install Microsoft.TypeScript.MSBuild package to your project

2. Edit your project file (.csproj)

   a.) Configure MSBuild to use the NuGet package's props file.

   <Import Project="..\packages\Microsoft.TypeScript.MSBuild.2.1.4\build\Microsoft.TypeScript.MSBuild.props" Condition="Exists('..\packages\Microsoft.TypeScript.MSBuild.2.1.4\build\Microsoft.TypeScript.MSBuild.props')" />
   <!--<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />-->
   

   b.) Configure MSBuild to use the NuGet package's targets file.

   <Import Project="..\packages\Microsoft.TypeScript.MSBuild.2.1.4\build\Microsoft.TypeScript.MSBuild.targets" Condition="Exists('..\packages\Microsoft.TypeScript.MSBuild.2.1.4\build\Microsoft.TypeScript.MSBuild.targets')" />
   <!--<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />-->
   

   If it is .Net Core project, add this code to section of .xproj file

   <TypeScriptToolsVersion>2.1.4</TypeScriptToolsVersion>
   <TscToolPath>C:\Users\[user account]\.nuget\packages\Microsoft.TypeScript.MSBuild\2.1.4\tools\tsc</TscToolPath>
   

If you are using tsc command directly, for example, quickstart demo: npm run tsc, the TypeScript dependency is defined in package.json and corresponding TypeScript will be installed during npm install build step, then it uses corresponding version of tsc tool to compile when invoke npm run tsc command through npm build step/task.

On the other hand, there is TypeScript compiler package, so you could include this package in your project, then compile typescript files through tsc.exe tool within that package.