How to resolve alias in tsconfig.app.json for multiple source directories in WebStorm

Question

I generate some of our source files outside of the src directory. The structure is:

- project
  - generated
    - $ui-services
        some-other.service.ts
  - src
    - app
      - $ui-services
          some.service.ts

In tsconfig.app.json I specified:

"compilerOptions": {
  ...
  "paths": {
    ...
    "@ui-services/*": ["app/$ui-services/*", "../generated/$ui-services/*"],
    ...
  }
},
"include": [
  "./**/*.ts",
  "../generated/**/*.ts"
]

In SomeOtherService now I can import SomeService like this:

import {SomeService} from '@ui-services/some.service';

It's working like expected, but now I lost any WebStorm development support in some-other-service.ts. WebStorm seems not to be able to resolve the alias correctly.

I already tried to mark both folders as Resource Root as some have suggested but that didn't help.

Is there anything I can do to fix the resolution to files in the other directory?

Answer 1

You will face the same issue when running tsc in command line. Typescript compiler uses the nearest tsconfig.*.json current file is included in, scanning folders from the file dir up to the project root. The nearest configuration file for generated/$ui-services/some-service.service.ts is the tsconfig.json file located in the project root, and this config doesn't have any aliases defined, thus tsc reports TS2307 errors, and members can't be resolved. Copying path mappings to the root config should solve the issue:

"paths": {
      "@ui-services/*": ["src/app/$ui-services/*", "generated/$ui-services/*"]
    },