Issues with tsconfig Path Aliases in Angular 8+ when used in .spec files

While working on Angular testing, I encountered an issue where my spec files were not recognizing paths and displaying a red squiggle import warning in VS Code (and appearing under Problems), even though they functioned properly otherwise (testing worked, etc.). It seems to be related to a tsconfig problem rather than a linting issue, as the error message states: 

Cannot find module '@feature/<reference path>.<file type>'.ts(2307)

Although it doesn't affect functionality much, it can be quite annoying (especially disrupting automatic imports).

Here's the content of tsconfig.json:

{
    // Compiler options here
}

The paths mentioned in tsconfig.spec.json and tsconfig.app.json are aligned with the standard folder structure from angular-cli.

{
    // Paths specified here
}

In angular.json file...


// Configuration details for test and lint

Versions used:

Angular CLI: 8.3.6
Node: 12.3.1
OS: win32 x64
Angular: 8.2.8
... list of packages and versions
angulartypescripttestingvisual-studio-codejestjs

Answer №1

It seems like the issue you're experiencing is likely tied to how your files and include settings are configured. I encountered the same problem when working with a limited set of files and include patterns, as not all my files matched the *.d.ts pattern.

To troubleshoot this issue, I suggest starting by removing the files and include sections from your tsconfig.json, and then restarting the TS server in VS Code.

If this resolves the issue for you, consider carefully determining what files actually need to be included in the configuration. The TypeScript documentation can provide guidance on this matter.

Remember, it's important to note that you may not necessarily need to specify these settings:

If "files" and "include" are not specified, the compiler will include all TypeScript (.ts, .d.ts, and .tsx) files in the directory and subdirectories, except those excluded using the "exclude" property. JavaScript files (.js and .jsx) are also included if allowJs is set to true.

If specificity is required, consider adding patterns like *.ts and\or *.tsx to your include section to address the issue.

I hope this information proves helpful to you!

Answer №3

Configuring tsconfig.ts File

{
  "compilerOptions": {
    ....
    "paths": {
      "@app1/*" : ["src/*"]
    }
  }
}

Setting up packages.json File for Jest Testing

  "jest": {
    ...
    "rootDir": "src",
    "moduleNameMapper": {
      "@app1/(.*)$": "<rootDir>/$1"
    } 
  }

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

"Angular encountered an error while attempting to access the property 'data' from an undefined

I'm encountering an issue when trying to retrieve data from a JSON file. Upon clicking a button to display the data in a textarea, the first click does not yield any result, but subsequent clicks work as expected. The program functions by fetching an ...

jsonangulartypescript

Do Typescript interfaces check method parameters for validation?

interface optionsParameter { url: string; } function DEC(options: optionsParameter){ } DEC(2) //typescript check compilation error let obj:any = { name: "Hello" } obj.DEC = function(options: optionsParameter){} obj.DEC(1); // no compilation ...

typescript

Leveraging both the spread operator and optional fields can improve the productivity and readability of your

Imagine you have an object with a mandatory field that cannot be null: interface MyTypeMandatory { value: number; } Now, you want to update this object using fields from another object, but this time with an optional field: interface MyTypeOptional ...

typescriptspread-syntax

The React Functional Component undergoes exponential re-renders when there is a change in the array

I'm encountering a problem with one of my functional components. Essentially, it maintains an array of messages in the state; when a new message is received from the server, the state should update by adding that new message to the array. The issue ar ...

javascriptarraysreactjstypescript

I'm experiencing an issue with my website where it appears broken when I build it, but functions properly when I use npm run dev in Next

For my project, I have utilized NextJs, Tailwind, React, and Typescript. It is all set and ready to be hosted. After using "output: export" in next.config.js and running npm run build, the process was successful. However, when viewing my website locally, I ...

reactjstypescriptnext.jstailwind-css

Tips for isolating data on the current page:

Currently, I am using the igx-grid component. When retrieving all data in one call and filtering while on the 3rd page, it seems to search through the entire dataset and then automatically goes back to "Page 1". Is there a way to filter data only within th ...

javascriptangulartypescriptinfragisticsigx-grid

NestJS: Specify the data type for @Body()

Consider the code snippet below: @Post() public async createPet(@Body() petDetails: PostPetDto): Promise<any> { } In this scenario, the type of @Bod() petDetails defaults to plain/any instead of the declared type of PostPetDto. What is the recommen ...

javascripttypescriptexpressnestjs

Determine the type of sibling parameter

Creating a Graph component with configurations for the x and y axes. The goal is to utilize GraphProps in the following manner: type Stock = { timestamp: string; value: number; company: 'REDHAT' | 'APPLE' | ... ; } const props: ...

javascriptreactjstypescripttypescript-generics

Typescript PDFjs encountering loading issues with corrupt files

In my Vue.js application, I have the following TypeScript class: /** Taken from https://github.com/VadimDez/ng2-pdf-viewer/blob/master/src/app/pdf-viewer/pdf-viewer.component.ts */ import { Component, Vue } from 'vue-property-decorator'; import ...

typescriptvue.jspdf.js

Is there a way to retrieve the current state of a Material UI component in a React functional component without needing to trigger an event by clicking on

Seeking a way to retrieve current values of Material Ui components without the need to click on any event after page reloads or DOM changes. These values are pulled from a database. My goal is to confirm whether the values have been updated or not by chec ...

javascriptreactjsangularmaterial-ui

Challenges with handling click events in Angular Material's mat-sidenav-content

When I add a click event to the mat-sidenav-content element like this: <mat-sidenav-content (click)="isNavBarOpened=false">, the mat-slide-toggle inside it stops functioning. Check out the code example here ...

angularangular-materialmat-sidenavmat-slider

Currying disrupts the inference of argument types as the argument list is divided in half, leading to confusion

One of my favorite functions transforms an object into a select option with ease. It's written like this: type OptionValue = string; type OptionLabel = string; export type Option<V extends OptionValue = OptionValue, L extends OptionLabel = OptionL ...

typescripttypescript-genericstype-inferencecurryingfunction-signature

Struggling to extract specific information from a json array using Angular, my current approach is only retrieving a portion of the required data

My JSON structure is as shown in the image below: https://i.stack.imgur.com/5M6aC.png This is my current approach: createUIListElements(){ xml2js.parseString(this.xml, (err, result) => { console.log(result); this.uiListElement = result[ ...

jsonangulartypescript

Converting an array into an object using Typescript and Angular

I have a service that connects to a backend API and receives data in the form of comma-separated lines of text. These lines represent attributes in a TypeScript class I've defined called TopTalker: export class TopTalker { constructor( pu ...

javascriptangularjstypescript

Resetting the value of a radio button input option to null using Angular2 ngModel

In my Angular2 application, I am attempting to implement radio button inputs using ngModel and value. The goal is to have three options: true, false, and null. However, I am struggling to assign a value of null to one of the inputs. Ideally, when nothing ...

htmlformsangularradio-buttonngmodel

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

Angular 2 Release Candidate 6 form input pattern always fails to pass

How can I ensure that a required input in my form fails validation if there is no non-whitespace character present? Despite setting the pattern to [/S]+, the validation does not pass. Could I be missing an import or something else? My Template: <form ...

formsvalidationangular

Whenever I try to run npm start within my angular component, I encounter a compilation problem

I am currently working on dynamically rendering a component on one of my screens. To achieve this, I am utilizing the componentFactoryResolver.resolveComponentFactory and viewContainerRef.createComponent APIs. I have declared the variable "loadedComp : Glo ...

angularangular-components

Angular 2's abstract component functionality

What are the benefits of utilizing abstract components in Angular 2? For example, consider the following code snippet: export abstract class TabComponent implements OnInit, OnDestroy {...} ...

angulartypescriptabstract-class

Issue encountered: "TypeError: .... is not a function" arises while attempting to utilize a component function within the template

Within my component, I am attempting to dynamically provide the dimensions of my SVG viewBox by injecting them from my bootstrap in main.ts. import {Component} from 'angular2/core'; import {CircleComponent} from './circle.component'; i ...

typescriptangular