WebStorm does not recognize tsconfig paths

Question

We have a problem where WebStorm complains about some named paths. Everything builds fine with webpack though.

This is our file structure:

apps
  app1
    tsconfig.e2e.json
    src
      tests
        testsuite1
          file.po.ts
libs
  lib1
    src
      index.ts
      libs

Our index.ts for the lib:

export * from './lib';

The paths in our tsconfig.e2e.json:

{
  "compilerOptions": {
    ...
    "paths": {
      "@a/lib1": ["../../libs/lib1/src"],
    }
  }
}

Our import is marked as not found in WebStorm in file.po.ts

import { Mo } from '@a/lib1';

We have enabled TypeScript language service in WebStorm and some other similar imports are working. We are new to TypeScript and WebStorm so perhaps we are missing something.

Answer 1

You need to restart after adding a new path

I had the same issue; after adding a new path to the tsconfig.json file I needed to restart my Intellij IDEA for it to recognize the path in import statements.

"paths": {
  "@alias/*": ["folder/*"],
},

After restart it stopped underlining the path with a red line:

import { SomeFeatureModule } from '@alias/some-feature/some-feature.module';

---

Check whether the path is relative to the baseUrl

If that is not resolving the issue, control click on the actual alias to see if it is recognized; clicking should bring you to the tsconfig.json file where the path alias is declared. Also check if the actual path is correctly taking the in the compilerOptions configured baseUrl property into consideration. The path should be relative to this base-url.

So for example:

"baseUrl": "src",

This would means that for the example above the existing folder should actually be:

src/folder/*