Error message: TscToolPath is missing in the Microsoft.TypeScript.targets file following the installation of Visual Studio 2015 update 3

Encountering an error in Visual Studio 2015 after updating to version 3 and using TypeScript 2.0.

Error       Invalid command line switch for "tsc.exe". Value cannot be null.
Parameter name: path1   ProjectTest C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets 214

The issue seems to be related to the TscToolPath being null, as indicated by this code snippet:

 <VsTsc
      ToolPath="$(TscToolPath)"
      ToolExe="$(TscToolExe)"
      TSConfigFile="%(ConfigFiles.Identity)"
      YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
      ProjectDir="$(ProjectDir)"
      ToolsVersion="$(TypeScriptToolsVersion)"
      TypeScriptCompileBlocked="$(TypeScriptCompileBlocked)"
      ComputeOutputOnly="false">

      <Output TaskParameter="GeneratedJavascript" ItemName="emittedFiles" />
  </VsTsc>

Despite checking Microsoft.Typescript.Default.props, the TscToolPath value cannot be found. However, it is specified in my .iceproj file for Telerik AppBuilder:

 <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptNoEmitOnError>False</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>False</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  </PropertyGroup>

Even though I added the TypeScriptToolsVersion information to the iceproj file, the error persists. Any assistance would be greatly appreciated :)

typescripttsc

Answer №1

Hopefully, the same steps will be effective for TypeScript v2 users as well (I'm still on version 1.8), but encountered a similar error while attempting to run the project.

So how did I resolve it... (you can skip to part 4 if needed, not entirely sure after all my modifications)

Part 1.

Make sure that the TypeScript options are configured in Visual Studio. https://i.sstatic.net/Dvh2m.png

Part 2.

Create a tsconfig.json file. 

{
  "compilerOptions": {
    "module": "amd",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "noEmitOnError": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "bower_components",
    "platforms"
  ]
}

Part 3.

I ended up removing all existing typing files from nuget and gradually replaced them using typings. This was mostly due to errors encountered in part 4. Rxjs proved to be one of the main culprits behind my issues.

Part 4.

Execute tsc from the command prompt. This will expose any errors present in your files. Previously, AppBuilder could proceed with errors, but currently, it is unable to build without errors. Even a simple issue like 

typings/globals/cordova-ionic/index.d.ts(4,12): error TS2503: Cannot find namespace 'Ionic'.
can lead to failure, which can be resolved by adding more typescript definitions: 
typings install dt~cordova-ionic/plugins/keyboard --global --save

Part 5.

Once tsc returns no more errors, attempt running appbuilder from Visual Studio again. This time, the Device Simulator should launch successfully.

Hoping these steps assist in resolving your issues too. Best of luck. If you encounter additional errors from tsc, include them in your question if you're unable to resolve them.

TypeScript 2 update

I have now upgraded to TypeScript 2 RC, and it seems to work seamlessly without modifying the project file. When building or running the project, the output displays: C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0\tsc.exe --project "H:\WhatsMyScore1\WhatsMyScore\MobileProject1\tsconfig.json" --listEmittedFiles

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ngFormModel with Ionic 2

How can I properly bind ngFormModal in my Ionic 2 project? I am facing an issue while trying to import it on my page, resulting in the following error message: Uncaught (in promise): Template parse errors: Can't bind to 'ngFormModel' since ...

angulartypescriptionic2

An issue has arisen with loading chunks in Ionic 5/Angular, possibly due to an un

I am currently working on enhancing the offline capabilities of my Ionic 5 app. To achieve this, I have implemented a strategy where data is stored in SQLite while the app is connected, and then retrieved from SQLite when offline instead of making HTTP req ...

javascriptangulartypescriptionic-frameworkservice-worker

Tips on resolving the 404 path error in Angular2/TypeScript ASP.NET 4.6.1 on Visual Studio 2015

I'm facing a challenge while developing a new application using TypeScript, Angular2, and ASP.NET 4.6.1 on VS2015. Two issues have come up in the process. First problem: I keep encountering 404 errors with the include files in my index.html file. Upo ...

typescriptgulpangular.net-4.6.1

Variable type assignment failed due to an error

I'm feeling a bit unsure about whether my query pertains to WebStorm, Angular2, or Typescript. Currently, I have an Angular2 build set up and I am using WebStorm 2016.1.2 for editing purposes. In one of my components, I obtain a reference to a DOM el ...

typescriptangularwebstorm

Looking for a regular expression to verify if the URL inputted is valid in TypeScript

After conducting thorough research, I discovered that none of the suggested URLs met my criteria, prompting me to raise a new query. Here are my specific requirements: * The URL may or may not include 'http' or 'https' * The URL can co ...

regextypescripturlmatch

What is the most effective way to condense these if statements?

I've been working on a project that includes some if statements in the code. I was advised to make it more concise and efficient by doing it all in one line. While my current method is functional, I need to refactor it for approval. Can you assist me ...

javascriptreactjstypescript

What is the reason that a globally declared variable cannot be accessed through the window object in Deno TypeScript?

Why is the context in the example below not accessible as window.context? The get_context function works fine, but the context variable does not. Why is that? It's important to note that this is in a Deno TypeScript setting. play declare global { ...

typescriptdeno

The functionality of express types is not optimized in the TypeScript playground

Have you attempted creating a demo for the TS type of express? Follow the Type Acquisition guide of TS Playground to manage the imported types by using // types: npm_tag_or_version. Despite specifying both versions, none seem to be functioning correctly. ...

typescriptexpresstypescript-playground

What is the most effective method for creating a personalized select in Angular?

I am currently working with the MEAN stack (Angular 6) and exploring different methods to build a custom and reusable <select> form control that utilizes an array of strings fetched from the backend server to generate all the <option> tags. For ...

javascriptangulartypescripthtml-select

react useState fetch does not loop

Error: Unable to iterate over the response Welcome page: import React, {useState, useEffect} from 'react' import {Main} from './style' import {sendRequest} from './ajax/main' const Home:React.FC<any> = () => { co ...

reactjstypescript

Tips for showcasing an array containing two different types of objects in Angular

After sending a request to a remote server, I am returned with a JSON array. However, the array can contain two different types of JSON objects: [ { "country": "USA", "caseCount": 561, "caseDates": [], ...

angulartypescript

An easy method to define argument types for every function type in TypeScript

How can I assign argument types to each function type in TypeScript? Each function has a parameter associated with it. [Example] type F1 = (arg: number) => void; type F2 = (arg: string) => void; const caller = (f: F1 | F2) => (n: number | strin ...

typescript

The type does not have a property named 'defaultProps'

I have a Typescript React class component structured like this: import React, { Component } from 'react'; interface Props { bar?: boolean; } const defaultProps: Partial<Props> = { bar: false, }; class Foo extends Component<Props& ...

javascriptreactjstypescripteslint

Issue with dynamic HTML preventing Bootstrap tooltip functionality

There's an HTML page where a section is dynamically generated through HTML injection from a typescript angularjs controller using $sce and ng-bind-html. The issue is that the custom bootstrap tooltip style doesn't seem to be applied, and only t ...

htmlangularjstwitter-bootstraptypescripttooltip

Is it possible to devise a universal click handler in TypeScript that will consistently execute after all other click handlers?

In my ReactJS based application written in TypeScript, we have implemented various click handlers. Different teams contribute to the application and can add their own handlers as well. The challenge we face is ensuring that a specific global click handler ...

javascriptreactjstypescriptdom-events

Is it possible to execute methods in the initialization phase using Express Route?

My express app has a simple structure, with the main file app.ts configured like this import * as express from "express"; const application: express.Application = express(); application.get("/", function( request: express.Request, ...

node.jstypescriptexpressexpress-router

Expanding superagent functionality through proxy integration

I am facing an issue where I cannot find any TypeScript definitions for the module superagent-proxy. This leads to errors when compiling my TypeScript application to JavaScript, specifically: ts: Property 'proxy' does not exist on type 'S ...

typescriptsuperagent

Angular 2 allows for duplication of elements using drag and drop functionality

Check out my code on Plunker for drag and drop functionality in drag.ts: http://plnkr.co/edit/PITLKzBB6YXobR1gubOw?p=preview. Please note that it only works in a separate window preview. import {Component, OnInit, ElementRef, Renderer} from '@angular ...

angulartypescriptdrag-and-drop

Is there a method (hack) to instantiate an instance of class `T` within a generic class?

Is there a way or workaround to instantiate an object of type T within a generic class? type Foo = { /*...*/ }; class Bar < T extends Foo > { public readonly foo: T; public constructor( init?: { foo: T } | undefined ) { this.f ...

typescript

Is combining a string and a React element within the same array considered acceptable in the world of React?

Consider a scenario where you need to display data in the form of string[][]. Here is the code snippet: export interface IProps { correctAnswers: string[][]; } public render(): JSX.Element { return ( <div> {this.props.c ...

reactjstypescript