VSCode / tslint does not resolve paths in tsconfig.json

Question

vscode is somehow not honoring my tsconfig.json (for a couple of weeks now, it has been different. eiter my bad or vscode update...)

{
"compileOnSave": false,
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@foo-animation/*": [
            "src/app/animation/*"
        ],
        ...

Respectively in the Problems tab:

Cannot find module '@foo-animation/animation-micro' or its corresponding type declarations. ts(2307)

✓ Regular base paths (like @angular/core) are properly resolved, just my ‘custom’ ones are the problem...

✓ Compiling, Building, Running... all works like a charm. So I believe from an angular/typescript-perspective everything is fine. (Also, my fellow developers using IntelliJ have no issues…) So it seems to boild down to „telling vscode about it“.... :-/

My tsconfig.json sits in the root-folder of the project. the only thing is, that I use another tsconfig.app.json, which includes above tsconfig.json.

So is there a way to tell vscode where to look for it's tsconfig.json (to encourage parsing those paths) ?

This SO question and this VSCode github issue might be related, but I still don't know what to do.

Worl

Have you tried this? – Blacklist

In my current project, I have set up some paths, but i did it in the tsconfig.app.json. I don't know exactly whats the proper way to do that - but compilung and tslint seem to work for me – Representational

Answer 1

I had a similar issue while setting up my repositories recently and I think adding this line to your vscode settings.json should help:

"tslint.configFile": "./tslint.json"

If your tslint.json is not in the root you should add your own path.

Quackenbush

Found the property, set the property and restarted but no effect. I do have a tslint.json, but that does not contain any compilerOptions.paths (should it?). Those paths are (see above ↑) in 'tsconfig.json' – Worl

No, tslint does not need the paths and the tsconfig looks correct. Do other linting rules work in your repository? – Quackenbush

Yes, they do. (right quotes, superficious spaces, etc) – Worl

Answer 2

You could use the typeRoots and types compileOptions.

typeRoots by itself tells tsc where to find type definitions. see typeRoots

"typeRoots": [
      "dirPath/@angular",
      "node_modules/@types",
      "node_modules/electron"
]                     /* List of folders to include type definitions from. */

Using types tells it whether there are specific ones that you would like to be resolved. Any other types will be ignored. see types

    "types": [
      "animation-micro",
      "jquery",
      "node",
      "react",
      "prop-types",
      "." //referencing types belonging to paths specified in typeRoots i.e. 'dirPath/@angular/.' , 'node_modules/@types/.' &  'node_modules/electron/.' - needed to resolve namespaces (dependencies)
],                

Note: Specifying typeRoots and types compileOptions will exclude types that are usually included by default, unless explicitly included.

Other helpful alternative, depending on your runtime setup and requirements, could be to use the rootDirs compileOption.

rootDirs allows you to treat everything almost like an 'Über jar' in java (the idea of everything being available in one place). see rootDirs

"rootDirs": [
      "/ts/", 
      "/js/",
      "src/main/resources/static/ts",
      "src/main/resources/static/js"
 ],/* List of root folders whose combined content represents the structure of the project at runtime. */

Depending on your use case, you may not even need both tsconfig files anymore using these.

Also note, using extends overwrites the referenced tsconfig settings, so be careful that you haven't accidentally overwritten some of your paths. That could also potentially cause issues.

Polito