CODEWITHSUNDEEP
angulartypescriptintellij-ideatsconfigtsconfig-paths
Motassem Jalal
Motassem Jalal

Reputation: 1314

Typescript: IntelliJ showing error when importing even when import is resolved correcty

I'm working on an Angular project. I have a library tools and a project example. My project structure looks like this (Monorepo)

root
|-- projects
|   |-- example
|   |   |-- src
|   |   |   `-- app
|   |   |       |-- app.module.ts
|   |   |       `-- view
|   |   |           `-- main.component.ts
|   |   `-- tsconfig.app.json
|   `-- tools
`-- tsconfig.json

My tsconfig.json looks like this

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

And my tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
    "allowJs": true,
    "experimentalDecorators": true,
    "traceResolution": true,
    "paths": {
      "tools": [
        "dist/tools/tools",
        "dist/tools"
      ],
      "@example/*": [
        "projects/example/src/app/*",
        "projects/example/src/app/view/features/*",
        "projects/example/src/app/core/guards/index.ts",
        "projects/example/src/app/core/components/index.ts",
        "projects/example/src/app/core/model/index.ts",
        "projects/example/src/app/core/services/index.ts",
        "projects/example/src/app/view/features/f1/store/index.ts",
        "projects/example/src/app/view/features/f2/store/index.ts",
        "projects/example/src/app/view/features/f3/store/index.ts"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

When I try to import tools in my app.module.ts, it works fine. But when I import it in any of the feature/sub modules, say main.component.ts, IntelliJ marks it as an error. TS2307: Cannot find module 'tools' or its corresponding type declarations

I tried to run tsc --project projects/example/tsconfig.app.json in the command line and examined the output, I found that it was resolved successfully Module name 'tools' was successfully resolved

I'm clueless and out of solutions!

Upvotes: 3

Views: 1667

Answers (2)

Zack Ream
Zack Ream

Reputation: 3076

Try moving your paths configuration into the root tsconfig.json instead of the project-specific tsconfig.app.json. This is actually where the Angular CLI library schematic (ng g lib tools) adds them.

To display type information for a particular file, IntelliJ will read the tsconfig that file "belongs to". This is determined by the "files"/"include"/"exclude" keys:

  • Your tsconfig.app.json is currently configured to include main.ts and polyfills.ts (and any files referenced by them), or any *.d.ts.
  • Your tsconfig.json will act as a catch-all for any other file.

Now, app.module.ts is referenced by main.ts, so it's part of tsconfig.app.json. Thus, within that file, IntelliJ is aware of the path mappings, and the tools import works just fine.

However, if you are doing your lazy routing correctly, main.component.ts is likely not directly imported by main.ts. It is now considered part of tsconfig.json, NOT tsconfig.app.json. Thus, within that file, IntelliJ has no idea about the path mappings, and the tools import throws.

(As a little test, try importing main.component.ts into app.module.ts. The tools import should immediately begin working in main.component.ts.)

When declared in tsconfig.json, the paths will work for any file, since tsconfig.app.json extends it.

Side note: You can actually see the tsconfig that IntelliJ uses for any particular file. Click the TypeScript button in the bottom status bar, then click Compile. You should see the file you're currently looking at, and the tsconfig that the file is part of. Screenshot.

Upvotes: 3

rafazzevedo
rafazzevedo

Reputation: 410

Have you tried to delete .project .settings .classpath folders ? I had something similar with my gradle project.

rm -rf .project .settings .classpath

Then I also tried after this opening the Settings > Invalidate Cache and Restart

Last case scenario I also had to clone and import the project again, and then perform the actions above.

Have a try, Intellij is always creating a lot of trash when building/compiling.

Upvotes: 0

Related Questions