absolute path in the tsconfig dose not work

user_12791321 0
Viewed 9176

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.

tsconfig-paths tsconfig typescript node.js
4 Answers

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.

user_66767810

I tweak @Carlo Corradini answer a little bit, here is my approach to fix this issue.

  1. install required plugins: npm i -D ttypescript typescript-transform-paths ts-node tsconfig-paths. these are packages that will help us to transform the paths.
    ttypescript-> https://www.npmjs.com/package/ttypescript

  2. then, on tsconfig.json, I put:

    {

 "ts-node": {
   "transpileOnly": true,
   "require": [  // set this so you dont need to use ts-node -r 
     "typescript-transform-paths/register",
     "tsconfig-paths/register"
    ]
 },         
 "compilerOptions": {
    "composite": true,
    "rootDir": ".", // must define
    "baseUrl": "src", // must define, the paths will relative to this
    "outDir": "lib", 
    "skipLibCheck": false,
    "paths": {
     "@app/*": ["./*"],
     "@controllers/*": ["./controllers/*"],
    },
     "plugins": [
       { "transform": "typescript-transform-paths" }
     ]
 }
}

  3. then on your codes you can use:

    import myControllers from "@controllers/main.ts"

  4. now you can compile, npx ttsc -p tsconfig.json

  5. and to run on ts-node use npx ts-node -p tsconfig.json src/app.ts

user_163600350

Your syntax is correct.

It appears that, at the time of writing, ts-node-dev does not support the paths entry of tsconfig.json.

This github issue discusses the problem and presents workaround options.

user_143570

Somewhere I saw this in the tsconfig.json file:

{ 
  "compilerOptions": {
    ...other rules,
    "baseUrl": "./src"
  },
  "include": ["src"]
}

It worked

user_143849180
Related