Webstorm not resolving module imports using typescript paths

Using WebStorm 2019.3.3

 

I have an Angular 9 project (typescript 3.7.5) with the following tsconfig.json contents:

 

 

and the following src/tsconfig.app.json file:

 

 

The project builds successfully, but WebStorm cannot resolve modules imported using the paths specified in src/tsconfig.app.json:

 

 

If I modify the includes/excludes blocks in src/tsconfig.app.json to the following, WebStorm will resolve the modules correctly:

 

 

However, this results in the following warning (multiple instances) during build (build is still successful):

 

WARNING in /<redacted>/src/app/shared/model/config-base-bo.ts is part of the TypeScript compilation but it's unused.

Add only entry points to the 'files' or 'include' properties in your tsconfig.

 

I believe the first configuration is correct, despite WebStorm not handling it as expected. Is there some other configuration I may be missing or have incorrect, or is this a bug?

I have deleted/recreated my project multiple times, and also invalidate caches/restarted repeatedly.

1
12 comments

The IDE works as expected: Typescript language service uses the nearest tsconfig.*.json current file is included in for syntax analyzing; your .ts file is only included in main tsconfig.json, and path mappings are defined in the other config - thus they are no recognized.

You don't see error when running your app because the ng compilation logic is different, the app goes through a build pipe starting from certain entry point

0

Elena, if WebStorm behaves the way you're describing, then why does a modification to src/tsconfig.app.json result in different behavior (WebStorm is able to resolve modules using the path mappings correctly)?

 

Are you getting the two files confused? src/tsconfig.app.json Has both the path mappings and the include block. This is the same file I modify to get WebStorm to behave the way I want

1

> then why does a modification to src/tsconfig.app.json result in different behavior (WebStorm is able to resolve modules using the path mappings correctly)?

because you are including the .ts files in it, making the service use this config for .ts files analyzing.

With your initial setup, only main.ts, polyfills.ts and declaration files (*.d.ts) are analyzed using tsconfig.app.json, for other .ts files the rules from tsconfig.json file are used; but, once you change the tsconfig.app.json to include *.ts files, it's applied to them as well

>Are you getting the two files confused?

no, what makes you think so?

0

Because you said:

 

"your .ts file is only included in main tsconfig.json, and path mappings are defined in the other config"

 

but the include and path mappings are in the same file.

 

I understand now that you're describing why WebStorm is behaving the way it is, but shouldn't WebStorm behave correctly with the first config? As it is now, do I have to "break" my build (introduce the warnings) to get WebStorm to resolve imports correctly?

1

>but the include and path mappings are in the same file.

No - the file that has path mappings in it only includes *.d.ts files, it doesn't include your .ts files

 

>but shouldn't WebStorm behave correctly with the first config? 

it does behave correctly

0

If I heed the warning I get during build:

Add only entry points to the 'files' or 'include' properties in your tsconfig.

Then my tsconfig file should not include all ts files. You're telling me I must include all ts files for WebStorm to resolve paths correctly.

This is the problem I'm trying to solve. Is there any way I can satisfy WebStorm's requirement to include all ts files, but avoid the build warning?

1

>Is there any way I can satisfy WebStorm's requirement to include all ts files, but avoid the build warning?

move your path mappings to the tsconfig.json file :)

1

That worked perfectly, thank you.

 

Why is WebStorm able to resolve modules correctly due to this change?

 

Earlier you said that the typescript service uses the nearest tsconfig to analyze, which would be the file I moved the paths to. If that's the case I don't understand how leaving the paths in src/tsconfig.app.json and modifying the include/exclude blocks in the same file also results in a change to WebStorm's behavior.

0

didn't I explain it above? OK, one more attempt:

1. You have 2 configuration files in your project

2. In case of multiple configs, the Typescript service uses the nearest config current file is included in, scanning folders from the file folder up to the project root.

3. src/tsconfig.app.json only includes *.d.ts files, it doesn't include your .ts files. That is why this file is ignored, the rules from tsconfig.json file are applied when you open a .ts file. So you need to have your path mappings defined in tsconfig.json to get your imports recognized

 

To make things clear: tsconfig.json _does_include your .ts files though it doesn't have "include" section. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html:

If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property.

1

Thank you, I understand now.

The "files" and "include" defaults was the piece of the puzzle I was missing.

0

I have the same issue with the next config taken straight from Vite default ts config: 

{
  "files": [],
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./**/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
 
What problem do you see here? 
0

Running tsc in terminal will result in

 TS18002: The 'files' list in config file 'C:/WebstormProjects/untitled4/tsconfig.json' is empty.

2   "files": [],
0

Please sign in to leave a comment.