Typescript: path configuration aliases not working with nested folders.

[henrikericsson]

Hello the typescript compiler seems unable to resolve path aliases when targeting subfolders

I'm using typescript v3.0.1 and my current project structure is:

example/
| -tsconfig.json
| -tslint.json
|
| -src/
----| -client/
----| -server/
----| -shared/

I have a tsconfig.json as follows:

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "types": ["reflect-metadata"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "jsx": "react"
  },
  "files": [
    "./node_modules/@types/mocha/index.d.ts",
    "./node_modules/@types/node/index.d.ts"
  ],
  "paths:": {
    "@server/*": ["server/*"],
    "@client/*": ["client/*"],
    "@shared/*": ["shared/*"]
  },
  "include": [
    "./**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

The above setup will throw "error TS2307: Cannot find module" on all modules imported with the named paths. Example: import { Route } from '@server/lib';

However it seems to be working when using the following project structure and paths:

server
| -tsconfig.json
| -tslint.json
| -lib/

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "types": ["reflect-metadata"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "jsx": "react"
  },
  "files": [
    "./node_modules/@types/mocha/index.d.ts",
    "./node_modules/@types/node/index.d.ts"
  ],
  "paths:": {
    "lib/*": ["lib/*"],
  },
  "include": [
    "./**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

I have tried multiple configurations non seem to work, am i missing something here?

[RyanCavanaugh]

I believe your issue here is that paths are always resolved relative to the tsconfig file itself; you should write

    "@server/*": ["src/server/*"],
    "@client/*": ["src/client/*"],
    "@shared/*": ["src/shared/*"]

If that doesn't fix it, please set up a sample repo and we can investigate

[henrikericsson]

The issue was using the "@" symbol. I Don't know why but removing those made everything work just fine.

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.

[mm-ns]

This is still not working for me.

This works:
"@actions/*": ["src/shared/actions/*"]

This does not
"@modules/*": ["src/shared/modules/*"]

Only difference inside actions there are only files, whereas in modules there are folders and inside those there are files.

In the intellisense it recognizes @modules/xxx/xxx.service but I get [0] Error: Cannot find module 'modules/database/database.service'

Any idea?

[jsakas]

@mm-ns be sure you have resolve.extensions set in your webpack config. I was struggling with this issue and that was the fix for me.

extensions: [ '.tsx', '.ts', '.js' ],

[edolix]

@mm-ns did you figure out a solution?

[kondaurovDev]

@edolix Are you using typescript and webpack? If so you need to add path alias to your webpack configuration also

I added this code to my config and now it's working, adapt it to your case:

    chainWebpack: config => {
        config.resolve
        .alias
        .set('@public', path.resolve(__dirname, 'src/module/public/'));
    }

[edolix]

Thanks @kondaurovDev - in my case i had issues with intellisense/autocomplete in VSCode while no problem with TS and Webpack.

I'd like to share https://github.com/microsoft/TypeScript/issues/27318#issuecomment-537084708 that helped me a lot!