Cannot shorten import paths with 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?

did you started the server again ? – billyjov Jul 25 '19 at 09:44 — billyjov, Jul 25 '19 at 09:44

score 3 · Answer 1 · answered Jul 25 '19 at 09:46

3

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';

answered Jul 25 '19 at 09:46

Tony Ngo

19,166
4
38
60

score 1 · Accepted Answer · edited Jul 25 '19 at 10:23

1

Advices for Typescript paths(especially in Angular CLI context)

After setting Paths inside your tsconfig.json you should restart your server in order to make it works as expected.
Always make sure your path begin with the root folder in order to avoid possible errors e.g using the src folder as root.

edited Jul 25 '19 at 10:23

Nazim Kerimbekov

4,712
8
34
58

answered Jul 25 '19 at 10:16

billyjov

2,778
19
35

score 1 · Answer 3 · answered Nov 22 '21 at 22:27

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!

score 0 · Answer 4 · answered Jul 25 '19 at 09:59

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 (e.g. .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',
  },

score -2 · Answer 5 · answered Jul 25 '19 at 09:48

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.

Cannot shorten import paths with tsconfig.json

5 Answers5