Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

Question

Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

Currently, I am working on a project using Angular 11 and aiming to utilize short imports like import {smthg} from '@common' instead of

import {smthg} from '../../../common'

However, I keep encountering errors in IDEA:

TS2307: Cannot find module '@common' or its corresponding type declarations.

The same error appears in the console when attempting to compile .ts files (ng serve)

An interesting observation is that adding /index to the import resolves the issue in IDEA but does not eliminate the error in the console

myAngularProject
│   package.json
│   tsconfig.json
│   tsconfig.app.json
│   angular.json    
│
└───src
    │   main.ts
    │   index.html
    |
    └───app
        |  
        └───common
        |
        └───features

Here is an excerpt from tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  .... (omitted for brevity)
}

This is how tsconfig.app.json looks:

{
  "extends": "./tsconfig.json",
  .... (omitted for brevity)
}

For more details on the IDEA error, you can refer to: https://i.sstatic.net/WAalZ.png

To check the console tsc error, visit: https://i.sstatic.net/CFRNH.png

Information regarding versions being used:

Angular CLI: 11.0.7
... (list of various packages and versions)
typescript                      4.0.5

angular typescript tsconfig aliases angular11

Answer 1

Answer №1

Interestingly, the angular engine has a feature that allows for creating aliases for paths based on what is defined in the "paths" section of tsconfig.

To ensure access to both subfolders within a module and what is exported from index.ts at the module's top level, the "paths" configuration should be set up like this:

{
  ...
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@common": ["app/common/index.ts"]
    }
  ...
  }
}

Answer 2

Interestingly, the angular engine has a feature that allows for creating aliases for paths based on what is defined in the "paths" section of tsconfig.

To ensure access to both subfolders within a module and what is exported from index.ts at the module's top level, the "paths" configuration should be set up like this:

{
  ...
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@common": ["app/common/index.ts"]
    }
  ...
  }
}

Answer 3

Answer №2

I encountered a similar issue when attempting to transition a project from Angular 10 to Angular 11. I tried copying the ./src/app folder, but unfortunately, that approach did not yield the desired results...

However, in a fresh project setup, I managed to make path aliasing work by following these steps:

Start by updating your Angular CLI:

PS C:\Projects> npm uninstall --g @angular/cli
PS C:\Projects> npm i --g @angular/cli

Create a new project and enable strict mode setting to true:

PS C:\Projects> ng new <<name-project>>
PS C:\Projects> cd <<name-project>>

After the CLI finishes, make the following modifications to tsconfig.app.json:

/* More details on this file are available at: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],

        // INSERT BELOW ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // INSERT ABOVE ↑↑↑
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Similarly, update tsconfig.json with the following configurations:

/* For more information on this file, refer to: https://angular.io/config/tsconfig. */
{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
            "es2018",
            "dom"
        ],

        // ADD THIS ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // ADD THIS ↑↑↑
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

Finally, adjust tsconfig.spec.json as shown below:

/* Further details on this file available at: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/spec",
        "types": [
            "jasmine"
        ],
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
    },
    "files"quot;: [
        "src/test.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.spec.ts",
        "src/**/*.d.ts"
    ]
}

Answer 4

I encountered a similar issue when attempting to transition a project from Angular 10 to Angular 11. I tried copying the ./src/app folder, but unfortunately, that approach did not yield the desired results...

However, in a fresh project setup, I managed to make path aliasing work by following these steps:

Start by updating your Angular CLI:

PS C:\Projects> npm uninstall --g @angular/cli
PS C:\Projects> npm i --g @angular/cli

Create a new project and enable strict mode setting to true:

PS C:\Projects> ng new <<name-project>>
PS C:\Projects> cd <<name-project>>

After the CLI finishes, make the following modifications to tsconfig.app.json:

/* More details on this file are available at: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],

        // INSERT BELOW ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // INSERT ABOVE ↑↑↑
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Similarly, update tsconfig.json with the following configurations:

/* For more information on this file, refer to: https://angular.io/config/tsconfig. */
{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
            "es2018",
            "dom"
        ],

        // ADD THIS ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // ADD THIS ↑↑↑
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

Finally, adjust tsconfig.spec.json as shown below:

/* Further details on this file available at: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/spec",
        "types": [
            "jasmine"
        ],
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
    },
    "files"quot;: [
        "src/test.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.spec.ts",
        "src/**/*.d.ts"
    ]
}

Answer 5

Answer №3

For successful implementation in Angular version 13, ensure to include a dot (.) in every path value as shown below:

"baseUrl": "./",
"paths": {
      "@app/*": [
        "./src/app/*"
      ],
      "@env/*": [
        "./src/environments/*"
      ]
    }

Answer 6

For successful implementation in Angular version 13, ensure to include a dot (.) in every path value as shown below:

"baseUrl": "./",
"paths": {
      "@app/*": [
        "./src/app/*"
      ],
      "@env/*": [
        "./src/environments/*"
      ]
    }

Answer 7

Answer №4

It is important to remember that restarting your code editor can often solve issues related to linters.

When faced with a similar problem, I discovered that my configurations were correct but the linter was not recognizing changes until I restarted my IDE. This lack of experience led me to try multiple solutions before finding this simple fix.

Answer 8

It is important to remember that restarting your code editor can often solve issues related to linters.

When faced with a similar problem, I discovered that my configurations were correct but the linter was not recognizing changes until I restarted my IDE. This lack of experience led me to try multiple solutions before finding this simple fix.

Answer 9

Answer №5

Path aliases are no longer supported in the latest versions

However, there is a workaround to directly import files relative to the src folder

Simply navigate to your tsconfig.json file and add baseUrl with the value of "."

"compilerOptions": {
    "baseUrl":".",
    ...

This allows you to import items directly from the src directory

import Myfile from "src/myfile.js"

I have successfully implemented this method!

Answer 10

Path aliases are no longer supported in the latest versions

However, there is a workaround to directly import files relative to the src folder

Simply navigate to your tsconfig.json file and add baseUrl with the value of "."

"compilerOptions": {
    "baseUrl":".",
    ...

This allows you to import items directly from the src directory

import Myfile from "src/myfile.js"

I have successfully implemented this method!

Answer 11

Answer №6

My issue was related to path aliasing, which appeared to be functioning correctly, however upon closer inspection I discovered that a .ts file was missing in the designated folder. This resulted in the types not being recognized and led to the following error message: "Cannot find module @app or its corresponding type declarations"

Answer 12

My issue was related to path aliasing, which appeared to be functioning correctly, however upon closer inspection I discovered that a .ts file was missing in the designated folder. This resulted in the types not being recognized and led to the following error message: "Cannot find module @app or its corresponding type declarations"

Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Unable to narrow down the truthiness within nested functions: TypeScript issue

JSX is restricted in files using the '.tsx' extension according to eslint rules (react/jsx-filename-extension)

WebSocket establishing fresh connection every passing moment

Navigating through nested routes in Angular 5

Leverage jsencrypt in Ionic 3

The Standalone Component does not appear for debugging in webpack:source when utilizing an incompatible version of Node

An issue occurred in the modal window following the relocation of project files

Implementing the 'colSpan' attribute in ReactJS

The map component does not render when the agm-map is placed within the component

Validation scheme for the <speak> element

Ways to leverage a single observable to modify a second one

When attempting to navigate to a sub-route, I am encountering the error message: "Unable to find a matching route" in Angular 6

Converting a string to the Date class type in Angular 4: A comprehensive guide

Restricting the data type of a parameter in a TypeScript function based on another parameter's value

Tips for preventing unnecessary dependencies from being installed in an Angular 10 application

Eliminate repeat entries in MongoDB database

Passing variables in Ionic's <a href> to open an external page: A step-by-step guide

When running the ng test command, the error "TypeError: The 'compilation' argument must be an instance of Compilation" is generated, but the ng build command functions correctly

What could be preventing me from setting a boolean variable within an Observable?

Signal a return type error when the provided element label does not correspond with an existing entity