Cannot resolve typescript aliases

See original GitHub issue

I’m sure this is a simple configuration matter for you, but I’ve read the documentation and went through some related issues here and I still don’t know how to configure the plugin to resolve import typescript aliases correctly. This is part of my tsconfig.json file:


    "paths": {
      "@models/*": [
        "app/core/models/*"
      ],
      "@services/*": [
        "app/shared/services/*"
      ],
      "@directives/*": [
        "app/shared/directives/*"
      ],
      "@helpers/*": [
        "app/shared/helpers/*"
      ],
      "@app/*": [
        "app/*"
      ]      
    }

And this is the related part of my eslintrc.js config:

            "files": ["*.ts"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
                "project": "tsconfig.json",
                "sourceType": "module",
                "ecmaVersion": 2020
            },
            "plugins": [
                "@typescript-eslint",
                "@angular-eslint",
                "import"
            ],
            "settings": {
                "import/parsers": {
                    "@typescript-eslint/parser": [".ts"]
                },
                "import/internal-regex": "^@",
                "import/resolver": {
                    "alias": {
                        "map": ["@", "./src"],
                        "extensions": [".ts", ".js"]
                    }
                }
            },

And I’m getting errors like this:

3:30 error Unable to resolve path to module '@app/shared/shared.module' import/no-unresolved

Oh, and it’s an Angular 8 app. I’m clearly missing something, but what? Thanks in advance.

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:6 (2 by maintainers)

Top GitHub Comments

20reactions

golopotcommented, Apr 3, 2020

I think eslint-import-resolver-typescript should fix your problem.

5reactions

digeomelcommented, Apr 3, 2020

And before anybody else could answer, I managed to solve it by adding this plugin:

https://www.npmjs.com/package/eslint-import-resolver-custom-alias

and setting every alias to the path that is already configured in tsconfig.json as such (eslintrc.js):


            "settings": {
                "import/parsers": {
                    "@typescript-eslint/parser": [".ts"]
                },
                "import/internal-regex": "^@",
                "import/resolver": {
                    "eslint-import-resolver-custom-alias": {
                        "alias": {
                            "@models": "./src/app/core/models",
                            "@services": "./src/app/shared/services",
                            "@directives": "./src/app/shared/directives",
                            "@helpers": "./src/app/shared/helpers",
                            "@app": "./src/app"
                        },
                        "extensions": [".ts"],
                    }
                }
            },

Still, I’m suspecting there must be an automated way without having to re-specify each path here? Tslint was working fine before without any extra configuration.

Top Results From Across the Web

Webpack resolve.alias does not work with typescript?

I am using Babel 7 with babel-plugin-module-resolver to resolve aliases. No ts-loader or awesome-typescript-loader as Babel 7 supports TypeScript out of the ...

Cannot resolve typescript aliases · Issue #1718 - GitHub

and setting every alias to the path that is already configured in tsconfig.json as such (eslintrc.js):. "settings": { "import/parsers": { "@ ...

How to configure and resolve path alias with a Typescript Project

Path alias is a way to define an absolute path in your typescript project with a word, path or a character.

Configuring aliases in webpack + VS Code + Typescript + Jest

config.js file and add a new section called resolve. There we will establish the mapping between the aliases and the physical paths. webpack.config.json....

Typescript – How to solve the problem with unresolved path ...

Setting up path aliases in the tsconfig.json file is really a nice approach to making ... Error: Cannot find module 'modules/myfunction'.