The issue of VSCode / tslint not being able to resolve paths in tsconfig.json is causing

For the past couple of weeks, I've noticed that vscode is not properly recognizing my tsconfig.json file. It's unclear whether this issue stems from a mistake on my end or an update to vscode...

{
"compileOnSave": false,
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@foo-animation/*": [
            "src/app/animation/*"
        ],
        ...

https://i.sstatic.net/E1ZOG.png

When checking the Problems tab, I encounter the following error:

Cannot find module '@foo-animation/animation-micro' or its corresponding type declarations. ts(2307)

Base paths like @angular/core are resolved correctly, but the issue seems to be with my custom paths...

Despite having no issues with compiling, building, and running the project, it appears that vscode needs additional information. (My colleagues using IntelliJ do not face any problems...) It appears to be a matter of informing vscode about the paths.

The tsconfig.json file is located in the root folder of the project. Additionally, I use another tsconfig.app.json which includes the aforementioned tsconfig.json.

https://i.sstatic.net/Dcng3.png

Is there a way to instruct vscode where to locate its tsconfig.json file for proper parsing of these paths?

You may find some insights in this Stack Overflow question and this VSCode GitHub issue, but I'm still unsure about how to proceed.

angulartypescriptvisual-studio-codetsconfigtsconfig-paths

Answer №1

Just the other day, I ran into a problem when configuring my repositories and found a solution that might work for you. Try inserting this snippet into your vscode settings.json file:

"tslint.configFile": "./tslint.json"

If your tslint.json file is located elsewhere, make sure to specify the correct path.

Answer №2

To enhance your TypeScript development, consider utilizing the typeRoots and types compile options.

typeRoots directs TypeScript compiler where to locate type definitions. Learn more about it here.

"typeRoots": [
      "dirPath/@angular",
      "node_modules/@types",
      "node_modules/electron"
]                     /* Specify folders to include type definitions from. */

With types, you can specify specific types for resolution while ignoring others. Check out the details here.

    "types": [
      "animation-micro",
      "jquery",
      "node",
      "react",
      "prop-types",
      "." //referring to types in specified paths in typeRoots. 
],

It's worth noting that specifying typeRoots and types compile options may exclude default types unless explicitly included.

Another useful alternative could be utilizing the rootDirs compile option based on your runtime setup and needs.

rootDirs enables organizing project content similarly to an 'Über jar' in Java. Explore more about it here.

"rootDirs": [
      "/ts/", 
      "/js/",
      "src/main/resources/static/ts",
      "src/main/resources/static/js"
 ],/* List of root folders representing project structure at runtime. */

By leveraging these features, you might find that you no longer require separate tsconfig files for your projects.

Furthermore, exercise caution when using extends as it can overwrite referenced tsconfig settings, potentially causing conflicts with path configurations.

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

The datepicker view is obscured by the div layer

When it comes to displaying datepickers in table rows, there seems to be a discrepancy. The datepickers in the top rows are functioning correctly, as shown in the first image. However, the datepickers in the bottom rows are not displaying properly, as illu ...

htmlangularcss-tablesbootstrap-table

Unlocking the secrets of setting up configuration during app initialization

After adding provideEffects(ConfigEffects) to my main/ts -> app.config.ts file, I encountered the following error message: TypeError: this.actions$ is undefined ConfigEffects config.effects.ts:23 createEffect Angular ConfigEffects config ...

angularrxjsngrxauth0angular18

Defining a property of an object within a Vue Class

If I were to write it in JavaScript version: export default { data() { return { users: {} } } } However, when using a class style component with vue-property-decorator: @Component export default class Login extends Vue { public title ...

typescriptvue.js

Accessing global variables after using the setInterval function can be tricky. Sometimes, despite setting the variable, it may still return undefined or

I have a typescript class where I am encountering some issues with accessing the starttime and count in the setInterval function. Even though I have set their values before, I am seeing undefined and NaN results. How can I resolve this problem? startTim ...

angulartypescriptionic-frameworktimersetinterval

The Custom Layout Component in Form.io

I am currently working with Form.io v3.27.1 and I'm in the process of developing a custom layout component, specifically an accordion. I have been referring to the concepts outlined in the CheckMatrix component example as my guide. Successfully, I ha ...

javascriptangulartypescriptformbuilderformio

Unexpected lack of error in Typescript intersection type and function signature

I have defined the following data structures: type SampleA = { a: string; } type SampleB = { b: number; } type SampleC = { c: boolean; } type Samples = SampleA & SampleB & SampleC; Next, I utilize the defined types in the f ...

typescript

Error notifications continue to appear despite the presence of data in the input field

I am utilizing a component to exhibit various information (such as first name, last name, phone number, etc.) fetched from the API. The main focus is on executing CRUD operations, particularly the update operation. Referencing the image below: https://i ...

angulartypescriptangular-materialangular6angular-forms

What is GraphQl indicating when it informs me that I neglected to send arguments for the mutation

My GraphQL schema consists of various mutations and queries. I believe that validation of mutations should only occur when I send mutation { ... } to the graphql server. However, currently, the server is informing me that I have not sent arguments for all ...

typescriptgraphqlexpress-graphql

"Encountered an unhandled promise rejection related to the Select

I encountered an issue between my app.module.ts and my app.welcome-panel-menu-list.component.ts. Can someone help me identify the problem? app.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@an ...

angularprimeng

The headers in the Angular HttpClient Response Object do not show up in the network tab of browsers or when using PostMan

Here is the function that makes a POST call to the server: submitData(credential){ credential = JSON.stringify(credential); return this._http.post("http://localhost:8080/login",credential,{observe: 'response'}); } In this section ...

angulartypescriptresthttpjwt

Is it possible to pass generics into a Promise, such as Promise<T>?

Here's the code snippet for a function I am working with: class RestService { public async get<T>(func: string): Promise<T> { var toRet = {}; await fetch(EndPoint + func) .then(response => response.json() as ...

jsontypescriptgenericspromise

What is the process for configuring Angular to recognize my SSL certificates?

I'm having trouble getting my angular application to use the key and certificate I created. I placed both files in a directory named "ssl." However, when I run "ng serve" for the first time, Angular generates its own keys (it was mentioned in the ter ...

angularsslssl-certificate

Upon the initial render, the fetch request in the NextJS Client component is not triggered

When I load my home page, I want to display a collection of cards from a client component. However, the API fetch request in the client component does not trigger on the initial render, preventing the cards from appearing. To fix this issue, I have to manu ...

typescriptnext.js

What is the reason for the Enter key being assigned to the incorrect button?

In my Angular 13 form, there are several buttons. One of them is used to add a new row to the form: <div class="col-md-2 offset-md-8"> <button class="badge rounded-pill bg-secondary mt-2" (click)="addRow()& ...

angularbootstrap-5ngx-bootstrap

Creating an array of JSX elements or HTMLElements in a React TypeScript rendering

Currently in the process of developing a custom bootstrap card wrapper that allows for dynamic rendering of elements on the front and back of the card based on requirements. Here is the initial implementation: import React, { useState, ReactElement } from ...

javascriptreactjstypescriptjsxtsx

Guidance on Implementing Promises in Ionic 2 and Angular 2

Here are two functions that I need to implement: this.fetchQuizStorage(); this.retrieveQuizData(); fetchQuizStorage() { this.quizStorage.getAnswers().then(data => { return data; }); } retrieveQuizData() { this.quizData.getQuiz().t ...

javascriptangularangular-promiseionic2

Experience the power of transforming nested forkjoin operations into observables

Trying to implement a solution in my resolver that involves nested forkjoins and subscribes has been challenging. I attempted using maps, but I still need to fully grasp the concepts of maps/switchMaps/mergeMaps. Even though the code doesn't currently ...

angularrxjsobservable

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

htmlangularversion-controlbitbucketpull-request

Guide on integrating google play services into a nativescript plugin seed?

I am developing a plugin for NativeScript using the recommended nativescript-plugin-seed available at this link. In my plugin, I require access to the Google Location service, but I am facing issues with accessing it. In order to implement the required de ...

androidtypescriptpluginsgoogle-apinativescript

Executing the routing component prior to any other tasks

Having an issue where the ProductsService is fetching data from the server and storing it in an Array. The ProductsComponent serves as the parent component, while the ProductsListComponent and ProductListItemsComponent are its children components. The flow ...

angulartypescript