Absolute path in the tsconfig doesn't work

Question

I saw some questions about this problem, none of them does not work I have a nodejs project along with Typescript. I do not like to use a relative path.I get the following error, when I set path in tsconfig :

Cannot find module '@app/controllers/main'

// main.ts
export const fullName = "xxxx";
...

// app.ts
import { fullName } from '@app/controllers/main'
...

This is the structure of my project :

-node_modules
-src
----controllers
---------------main.ts
----app.ts
-package.json
-tsconfig.json

tsconfig:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "baseUrl": ".",
        "paths": {
            "@app/*": ["src/*"]
        },
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

Where is my problem?

Thanks in advance.

Answer 1

Update 2023

1. Install development dependencies

npm install --save-dev \
  ts-patch \
  typescript-transform-paths \ 
  tsconfig-paths

• ts-patch
  Directly patch typescript installation to allow custom transformers (plugins).
  The main difference why I prefer ts-patch over ttypescript is that there is no need to change the compiler (ttsc) because (hence the name) tsc is patched.

• typescript-transform-paths
  Transforms absolute imports to relative from paths in your tsconfig.json.

• tsconfig-paths
  Load modules whose location is specified in the paths section of tsconfig.json. Both loading at run-time and via API are supported.

2. Update tsconfig.json

Note: See paths and plugins

{
   "compilerOptions":{
      /* A series of entries which re-map imports to lookup locations relative to the baseUrl */
      "paths":{
         "~/*":[
            "./src/*"
         ]
      },
      /* List of language service plugins */
      "plugins":[
         /* Transform paths in output .js files */
         {
            "transform":"typescript-transform-paths"
         },
         /* Transform paths in output .d.ts files */
         {
            "transform":"typescript-transform-paths",
            "afterDeclarations": true
         }
      ]
   }
}

3. Patch Typescript

Note: This is NOT persistent

npx ts-patch install

4. Edit/Add prepare script in package.json to patch Typescript persistently

Note: This IS persistent

{
  // ...
  "scripts": {
    "prepare": "npx ts-patch install -s"
  }
}

5. Usage in import

import { hello } from '~/world';

6. Compile as always

npx tsc

Old Answer

Unfortunately (and I don't know why) the Typescript compiler currently does not support the paths transformation very well.

Here is my solution:

I used the solution with this project.

Install devDependencies

1. ttypescript -> npm install ttypescript --save-dev -> TTypescript (Transformer TypeScript) solves the problem by patching on the fly the compile module to use transformers from tsconfig.json.
2. typescript-transform-paths -> npm install typescript-transform-paths --save-dev -> Transforms absolute imports to relative from paths in your tsconfig.json.
3. tsconfig-paths -> npm install tsconfig-paths --save-dev -> Use this to load modules whose location is specified in the paths section of tsconfig.json. Both loading at run-time and via API are supported.
4. ts-node-dev -> npm install ts-node-dev --save-dev -> It restarts target node process when any of required files changes (as standard node-dev) but shares Typescript compilation process between restarts

tsconfig.json

Update the tsconfig.json file with the following options:

{
    "compilerOptions": {
        /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
        "paths": {
            "@app/*": [
                "./src/*"
            ]
        },
        /* Advanced Options */
        "plugins": [
            {
                "transform": "typescript-transform-paths"
            }
        ],
    }
}

Build

For the compilation phase use ttsc instead of tsc with the configuration file. See the snippet below:

npx ttsc --p ./tsconfig.json

Development mode with autoreload

When you are in dev mode use the following script (put it in the scripts options in package.json) to automatically reload the project with the correct paths. The src/app.ts is the "entry point" of your application located under the src folder.

npx ts-node-dev --prefer-ts true --no-notify -r tsconfig-paths/register --watch src --transpileOnly src/app.ts

PS: Using ts-node-dev increase the speed significantly.