Errors related to *.d.ts files in the node_modules directory are occurring in Visual Studio 2015

I am currently in the process of upgrading a project from Angular JS to Angular 4. The existing Angular JS project already makes use of TypeScript, and upon conversion, I am encountering numerous errors in Visual Studio pertaining to third-party TypeScript typing files (*.d.ts). In addition to these errors, there are also some issues with the actual TypeScript files.

Interestingly, the TypeScript code successfully compiles when using the command-line TypeScript compiler (tsc). Hence, my goal is to prevent compile checking for all *.d.ts files.

I have explored various solutions suggested by others facing similar problems but none seem to work for me, particularly since most of them are tailored for VS 2017.

Here are the steps I've taken thus far to disable compile checking:

Added 'TypeScriptCompileBlocked' to the .csproj file:


   <PropertyGroup>
      <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
      ....
   </PropertyGroup>
  • Subsequently closed and reopened Visual Studio

Created an .eslintignore file:

In the root of the project, I added an .eslintignore file with rules to ignore all *.d.ts files:

**/*.d.ts
**/node_modules/*

Disabled ESLint:

Despite scouring through VS Tools > Options, I could not find an option to disable ESLint specifically in VS 2015.

Modified tsconfig.json to exclude the node_modules folder:

"exclude": [
  "./node_modules/*"
]

-- Additionally tried --   

   "node_modules"
   ... and
   "**/*.d.ts"

Set "compileOnSave" to false in tsconfig.json:

{
  "compilerOptions": {
    "compileOnSave": false
  }
}

Inclusive of this change, I also specified an empty array within "types": [] under "compilerOptions".

Moreover, I tinkered with several other compilerOptions to disregard errors, however, they do not pertain to the current issues:

"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"noStrictGenericChecks": true

What further actions should I take to address the errors related to *.d.ts files? For reference, here's a snippet of some errors found in the file node_modules\@angular\common\src\directives\ng_class.d.ts:

https://i.sstatic.net/0sD4r.jpg

The current configuration details of the project are as follows:

  • TSC compiler version = 1.8
  • TypeScript version = 2.6.2 (installed via npm)
  • No TypeScript configuration options set directly within the Visual Studio project (.csproj file)

Below is the complete tsconfig.json setup:

{
  "compilerOptions": {
    "target": "es5",
    "module": "ES2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "noStrictGenericChecks": true
  },
  "include": [ "**/*.ts" ],
  "exclude": [
    "node_modules"
  ]
}

(Regarding the module value used, refer to MicroSoft documentation):

"ES6" and "ES2015" values may be employed when targeting "ES5" or lower.

Link to TypeScript Compiler Options Handbook

As an experiment, I also experimented with setting "commonjs" as the value.

Answer №1

After some investigation, I discovered that the TypeScript installed by npm is separate from the one used by Visual Studio. To address this issue, I downloaded and installed TypeScript 2.6.2 specifically for use with VS2015 from this link:

https://www.microsoft.com/en-us/download/details.aspx?id=48593

This installation created a directory at C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.6 which contains a tsc.exe. I then updated my .csproj file to reference this version:

<TypeScriptToolsVersion>2.6</TypeScriptToolsVersion>

By making this change, all errors were resolved.

In addition, I had to include my tsconfig.json file in the project by right-clicking and selecting "Include in Project." This action instructed Visual Studio to use the settings specified in the tsconfig.json file instead of the .csproj configuration.

It took a few attempts of unloading and reloading the project, as well as saving in between, until Visual Studio recognized the disabled project properties. Alternatively, closing and reopening Visual Studio while saving any changes may also achieve the same outcome.

Ultimately, it seems that the initial difficulties stemmed from Visual Studio's inability to interpret the solution accurately and generate the expected results, especially regarding the exclusion of d.ts files.

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

When implementing Sequelize's `findAll()` method without a `where` clause, the result may yield fewer rows compared to the

After executing a Sequelize findAll query on a table, I received 2994 rows. However, when I performed a SELECT COUNT(*) directly in the database, it returned 11909 rows for the same table. Below is an example of the code snippet: // SELECT COUNT(*) FROM c ...

Warnings during NestJS Compilation

Currently, I am diving into the world of NestJS and encountering some difficulties with the code snippet below. The warning coming from @nestJS states "nestjs: Unknown word.cSpell" When using functions like status and send, I'm receiving a warning th ...

Tips for showcasing individual row information in a popup window with Angular 9

Here is the code snippet for utilizing the open dialog method in the component: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { AuthService } from '../_services/auth.se ...

What is the process for including an "everything" alternative on a dropdown menu?

Need assistance with my dropdown component that filters a list based on 'state' data. Below is the HTML code for the dropdown: <section class="select-wrapper {{wrapperClass}}" [ngClass]="{'expanded': toggle}" (click)="toggleSelect($ ...

Sending nested JSON in Angular 2 Post Request

Are there any efficient ways to handle the task of importing raw JSON data and posting it to a server using an import function? For example, if a user copies and pastes the following JSON: { "name": "testing", "design": [ { "name": "test", ...

Understanding Typescript in Next.js components: Deciphering the purpose behind each segment

Consider the following function: type User = { id: string, name: string } interface Props { user: User; } export const getUserInfo: GetUserInfo<User> = async ({ user }: Props) => { const userData = await fetchUser(user.id); return ...

What is the significance of a React Functional Component returning JSX.IntrinsicElements?

I stumbled upon this React functional component in a particular documentation import React, { useState, useEffect } from 'react'; import { fabric } from 'fabric'; interface ITextProps { id: string; options: fabric.ITextboxOptions; ...

How to implement and utilize a history-object interface in React with Typescript?

Can you help me with setting up an interface for a history object in my component? Currently, it is typed as any and I want to type it appropriately. Object: https://i.sstatic.net/Sru8R.png Here's the code snippet: import React, { useState } from &a ...

Async and Await with Typescript

After searching extensively, I couldn't find a similar issue. I am working with Ionic 4 in Angular 7 along with Typescript 3.16. I have multiple 'TimeSpan' values that I need to retrieve using a function from the HTML like so: <ion-input ...

Why is my CSS not showing up in Live Server when I preview it from Visual Studio?

Every time I use the "Go Live" option with Live Server (Visual Studio extension), I only get a preview of my plain HTML file. However, when I manually open the HTML file from the folder containing both HTML and CSS files, the page loads correctly with the ...

Encountering a problem while attempting to update react-router from version 5 to version 6

I am encountering a typescript error after upgrading React-router-dom from v5 to v6. How can I resolve this issue? Below is the code snippet. Thank you in advance. export function withRouter(ui: React.ReactElement) { const history = useNavigate(); con ...

Pressing the button does not trigger any action within the Select Case

In my current project, I am working on developing a brackets program that involves determining winners. My code includes the usage of Select Case to determine the outcome. The code snippet I have created is as follows: Private Sub Button1_Click(sende ...

What could be causing the elements in my array to appear as undefined?

https://i.stack.imgur.com/ze1tx.png I'm stuck trying to understand why I can't extract data from the array. const usedPlatformLog: Date[] = [] users.forEach(el => { usedPlatformLog.push(el.lastUsed) }) console.log(usedPlatformLog) // disp ...

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

Named functions in Typescript within functional components are the best practice for improving

How can I implement handleFoo using MyType['foo']? type MyType { foo: () => void } const Comp: React.FunctionComponent<{}> = () => { function handleFoo() {} return ... } I'm looking for a solution that doesn't inv ...

The code breaks when the lodash version is updated to 4.17.4

After updating lodash to version 4.17.4, I encountered an error in Typescript that says: TypeError: _.uniqBy is not a function Uncaught TypeError: _.split is not a function The code snippet in question is as follows: import * as _ from 'lodash&apo ...

Concealing the Submit Button During Server Processing (Issues with Binding?)

My Angular 2 form is set up to send data to the server asynchronously. I want to provide users with visual feedback during the waiting period by changing the blue 'submit' button to a greyed-out 'Please wait...' button. To achieve this, ...

Error TS2339: The property 'mock' is not found on the type '(type: string) => Promise'. Unable to create a mock for SQS Queue.sendMessage()

I am attempting to simulate a call to the SQS method sendMessage() that is used in the System Under Test (SUT) like this: private async pushJobIntoQueue(network: Network) { await this.contactInteractionsQueue.sendMessage( JSON.stringify({ ...

Having trouble simulating a custom Axios Class in JavaScript/TypeScript

Here are the function snippets that I need to test using jest, but they require mocking axios. My attempt at doing this is shown below: // TODO - mock axios class instance for skipped Test suites describe("dateFilters()", () => { beforeEac ...

Click on the (i)th anchor in Angular2 to pass the data of (i+1)th element

Is it possible to pass the i+1 data when clicking on the i-th anchor in Angular 2 using ngFor? Could someone please assist me with this? <ul> <li *ngFor="let menu of _menus; let k=index" > <a (click)="GoToSectionPag ...