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>

Might want to check if tsc 2.1 is installed on your build server first. After that, double check your build process to see how tsc is being invoked. Hope that helps. — Vinny
– Vinny, Commented Dec 19, 2016 at 16:27

starian chen-MSFT · Accepted Answer · 2016-12-21 10:09:49Z

2

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:

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

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.

edited Dec 21, 2016 at 10:09

answered Dec 20, 2016 at 8:00

starian chen-MSFT

33.8k2 gold badges32 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

johnstaveley Over a year ago

Thanks for your response. I have included the package.json command above to show what I am doing more clearly. I think this means I am using the tsc command directly? I tyried changing the version of TypeScript to 2.0.6 as suggested but the build still fails with the same error message. I wasn't clear which subset of the above suggestions applied to my situation. Thanks

starian chen-MSFT Over a year ago

@johnstaveley First, why do you need to compile typescript file in node_modules? Just exclude that folder in tsconfig.json if you don't need to compile. Secondly, try to add "tscv": "tsc --version" to Script section of package.json, then invoke npm run tscv through npm build step/task. Thirdly, provide the detail steps of your build definition.

johnstaveley Over a year ago

According to this typescriptlang.org/docs/handbook/tsconfig-json.html the node_modules directory should be excluded by default

starian chen-MSFT Over a year ago

@johnstaveley What's the detail code of your tsconfig.json, the node_module directory is excluded by default if you don't specify exclude files or folders (no exclude section in tsconfig.json). On the other hand, could you share a simple project on the OneDrive.

johnstaveley Over a year ago

I added it anyway. I then added the tscv commands, this fails in build with the message ##[error]Only one command should be used for npm. Use 'Arguments' input for additional arguments.

|

Collectives™ on Stack Overflow

Angular2 build failing in Visual Studio Team Services

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related