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

Question

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

angular typescript testing visual-studio-code jestjs

Answer 1

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 2

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

Answer №2

I made the mistake of not setting up the jest.config.js file properly for my project.

tsconfig.ts
...
"@app/*": ["src/app/*"],
...

Additionally,

jest.config.js

module.exports = {
    moduleNameMapper: {
        "@app/(.*)$": "<rootDir>/src/app/$1"
    } 
};

For more information, please visit: https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring

Answer 4

I made the mistake of not setting up the jest.config.js file properly for my project.

tsconfig.ts
...
"@app/*": ["src/app/*"],
...

Additionally,

jest.config.js

module.exports = {
    moduleNameMapper: {
        "@app/(.*)$": "<rootDir>/src/app/$1"
    } 
};

For more information, please visit: https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring

Answer 5

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"
    } 
  }

Answer 6

Configuring tsconfig.ts File

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

Setting up packages.json File for Jest Testing

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

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

Answer №1

Answer №2

Answer №3

Similar questions

How can you set a checkbox to be selected when a page loads using Angular?

Creating a simulated provider class to simulate a response and manage promises - Implementing Unit Testing using Jasmine and Karma within an Ionic 3 environment

Using a union type annotation when passing into knex will result in the return of an unspecified

Angular reloads content when language is switched

How to show ngFor value from Angular in a separate tag

Heroku: Unable to retrieve resource - server returned a 404 (Not Found) status code

Issues with React Material UI Select functionality not performing as expected

Function 'Once' in Typescript with Generics

Making an Http Get request in Angular 2 by passing a JSON object

I am encountering an issue with Wedriver.IO where screenshots of executions on a Remote Selenium Grid Hub are not being included in my Allure Reports

Code coverage analysis in a node.js TypeScript project consistently shows no coverage metrics

Getting the id of a single object in a MatTable

Enabling or disabling cell editing dynamically in Ag-grid based on another field's value

Authentication Redirect Failure when using Passport to an absolute URL

Sorting items in Ag-Grid according to user's preference

Deactivating attribute inheritance / configuring component settings with script setup and Typescript

Creating an Angular form group that includes dynamic form controls with custom form control names

Receiving 'Module not found' error in Typings on specific machines within the same project. Any suggestions on how to troubleshoot this issue?

Formik button starts off with enabled state at the beginning

Unable to attach 'gridOptions' as it is not a recognized attribute of 'ag-grid-angular' component (Angular4)