Cannot resolve typescript aliases

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.

[golopot]

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

[digeomel]

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.