无法使用 tsconfig.json 缩短导入路径

Question

The paths I defined in tsconfig.json do not work.

I started a project with Ionic 4 and wanted to avoid ugly paths in the imports. I found information about modifying tsconfig.json, which I did. I already found these answers: How to use paths in tsconfig.json? and Cannot resolve tsconfig paths

So my tsconfig.json looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@services/*": ["app/services/*"],
      "@data/*": ["app/data/*"]
    }
  }
}

And I access a class that specifies a user in my service:

import { User } from '@data/User';

The User class looks like this:

export class User {
   ...
}

My project structure looks like this:

I don't see any difference between my code and the different solutions I shared. The error shown is:

[ng] ERROR in src/app/services/profile.service.ts(3,22): error TS2307: Cannot find module '@data/User'. [ng]

What am I doing wrong?

Answer 1

You should change your config like this

"paths": {
  "@services/*": ["src/app/services/*"],
  "@data/*": ["src/app/data/*"]
}

Because the path should be start from src folder

Then you can import like

import { User } from '@data/User';

Answer 2

Advices for Typescript paths(especially in Angular CLI context)

1. After setting Paths inside your tsconfig.json you should restart your server in order to make it works as expected.

2. Always make sure your path begin with the root folder in order to avoid possible errors eg using the src folder as root.

Answer 3

I used the paths option several times and with varying results. Unfortunately, it never works as well as you would expect. The first thing you should try is to delete your dist and recompile your project from scratch and check that the transpiled javascript has indeed produced the right import paths (eg .js files have the complete paths in them). Usually recompiling a few times works.

Then I suggest to rely on your IDE to be sure that your paths are written correctly, for example, VSCode should able to resolve your imports and you should be able to navigate through cmd+click or ctrl+click on your imports. If VSCode is not navigating your imports correctly, most probably you need to check your tsconfig again (even though it looks correct from your screenshot).

Also, an important note is that paths is ignored when performing tests with jest/ts-jest, if that is what your are trying to achieve then you need to map paths in your jest configuration as well using the modeuleNameMapper options like this:

  moduleNameMapper: {
    '^@finder/(.*)$': '<rootDir>/files-manipulation/$1',
    '^@metadata/(.*)$': '<rootDir>/folder-metadata/$1',
    '^@logger/(.*)$': '<rootDir>/logging/$1',
  },

Answer 4

The following worked for me in 2021:

a) Modify your tsconfig.json file to resemble the following:

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@environment/*": ["./src/environments/*"],
    "@app/*": ["./src/app/*"],
    "@core/*": ["./src/app/_core/*"],
    "@shared/*": ["./src/app/_shared/*"]
  }

b) Restart your server.

c) Use the paths mentioned in tsconfig.json file as shown in the example below:

import { CategoriesService } from "@shared/services/categories/categories.service";

d) Ensure that you modify the above import to match your own directory structure. That's it!

Answer 5

I didn't make such thing before but i think if you change this file you chould also change the app.modules.ts for service path. And in app.routing.ts you should change the import path of the class to the new one since it starts with default ./ and you changed it. And in user.module.ts i think you should also change. Thats not an answer but suggestion to see if thats the problem Regards.