Visual Studio Code can't resolve angular's tsconfig paths

Question

I'm trying to import some services using barrels and tsconfigs paths options but I can't get angular and vscode to get along.

If it works for one it doesn't for the other and viceversa...

My situation seems to be pretty simple:

in src/app/services I have a service which is exported in a index.ts
my src/tsconfig.app.json is just this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": ".",
    "paths": {
      "services": ["app/services"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
}

and my angular app compiles with no issues, but vscode keep giving me errors every time I try to import my service from 'services' giving me [ts] Cannot find module 'services'.

why?

I'm using typescript 3.1.6 and in vscode settings I have "typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib" (I also tried to leave the default setting, no changes)

edit:

if I specify paths in ./tsconfig.json starting from src, vscode is happy but angular is not.

if I specify paths in both tsconfig.json and src/tsconfig.app.json, both vscode and angular are happy, but it seems a too stupid workaround to me...

And did you try setting the TSDK to your project instead of the NPM one ? — user4676340
– user4676340, Commented Nov 6, 2018 at 14:00
Found a vscode config can fix this problem: "typescript.preferences.importModuleSpecifier": "non-relative", — Jeremy Su
– Jeremy Su, Commented Nov 25 at 8:43

Doc · Accepted Answer · 2018-12-13 10:13:32Z

59

I figured it out, even if I'm keep thinking that is all absurd...

VsCode automatically looks for a tsconfig.json file and it doesn't care about tsconfig.app.json, so paths needs to be specified in tsconfig.json.

At the same time, the angular-cli scaffolding specify a baseUrl parameter in tsconfig.app.json which overrides the upper one.

The solution is to delete baseUrl parameter in the tsconfig.app.json or edit its value to "../"

(As a personal remark, given that vscode is largely used to build angular solutions, I think that there's something that should be revisited in the angular-cli scaffolding or in how vscode looks for tsconfig files)

edited Dec 13, 2018 at 10:13

answered Nov 6, 2018 at 14:23

Doc

5,3466 gold badges62 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

s-f Over a year ago

I think it's also source of confusion for WebStorm

Davy Over a year ago

Glad i found this, it would have taken a while before i would have tried that (makes little sense)

roberto tomás Over a year ago

holy crap, THIS is the answer :) I was getting depressed because it seemed like everyone had solved this problem just by locating paths in tsconfig.app or adding a glob at the end for directories..

Wojciech Owczarczyk Over a year ago

Also changing the imports to "non-relative" in VS Code setting was a required to step to make this work for me

Angela P Over a year ago

if I delete baseUrl or edit to "../" it breaks when I start the app with "npm start" what should I do now?

|

Shahryar Saljoughi · Accepted Answer · 2021-05-08 18:05:20Z

55

this answer worked for me.

Open Command Palette and select TypeScript: select TypeScript Version ...
Select to use Workspace Version

Hope this answer solves problem of others facing the same problem.

answered May 8, 2021 at 18:05

Shahryar Saljoughi

3,12726 silver badges46 bronze badges

Comments

parliament · Accepted Answer · 2022-03-22 12:19:35Z

14

I was struggling with this issue for a long time and have tried just about every solution on the internet. The project would compile but VSCode would not honor the "paths" declarations in my tsconfig.json.

What finally fixed it for me was removing the "include" and "exclude" sections of my tsconfig.json

I'm not sure which one of the 2 was the problem, but removing both finally fixed my long-standing issue.

answered Mar 22, 2022 at 12:19

parliament

23.2k39 gold badges155 silver badges248 bronze badges

6 Comments

joe Over a year ago

my tsconfig had been working for ages, but decided to go dumb with TS 4.6. i had to actually add src include: [ "src/*", "some other paths" ] to bring it back to life.

Mohammad Umair Khan Over a year ago

removing include fixed it for me

David Carboni Over a year ago

Seems totally random, but it worked for me on a non-angular project. I couldn't find any way to import from /src in mocha tests (/test) without using ugly relative imports. Also vscode intellisense wouldn't offer completions. I've spent a couple of hours poking around different solutions and finally found this. I giess "do less" is often a good answer!

soni Over a year ago

Same happen to me, removing "exclude" section worked... don't see much sense on that BTW... I might be doing something wrong but I don't know what!

Wayne Kaskie Over a year ago

Mine were there as empty arrays. Removing them worked for me as well.

|

AndreasS · Accepted Answer · 2019-09-15 22:07:20Z

13

It seems VSCode only checks the tsconfig.json directly in the folder your open. It does not check folders above like tsc and does not look at tsconfig.app.json. So in some cases the baseUrl might be missing because VSCode simply has not read a tsconfig.json.

VSCode's limitation to a single tsconfig.json in a fixed place has been around for a while and it seems it's not so easy to make this more flexible: https://github.com/microsoft/vscode/issues/12463 (scroll to end)

As mentioned above this is annoying in Angular-CLI scaffolding with multiple sub-projects where there is only one tsconfig.json at the root of the workspace. Obviously the projects might have different baseUrls in their tsconfig.app.json which cannot all go in a single tsconfig.json at the root.

As a workaround I have in addition to the project specific baseUrl in tsconfig.app.json created an extra minimal tsconfig.json for VSCode in the src folder of a sub-project with "baseUrl":"." and open VSCode from there. I have not tested this severely but so far Angular compiling and VSCode intellisense both seem to be happy.

edited Sep 15, 2019 at 22:07

answered Sep 15, 2019 at 21:58

AndreasS

3843 silver badges15 bronze badges

1 Comment

user1034912 Over a year ago

Examples please!

HungCung · Accepted Answer · 2019-11-25 09:04:55Z

5

In case you work with project Angular, let place baseUrl and paths in tsconfig.json instead of tsconfig.app.json.

answered Nov 25, 2019 at 9:04

HungCung

1881 gold badge2 silver badges9 bronze badges

Comments

Syimyk Amatov · Accepted Answer · 2021-03-30 16:19:55Z

5

Create tsconfig.json in your application near tsconfig.app.json.
Add next settings

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
       /* your_paths */
    }
  }
}

In your tsconfig.app.json and tsconfig.spec.json rewrite on "extends": "./tsconfig.json"

Final file structure

projects
  your_application
    tsconfig.json
    tsconfig.spec.json
    tsconfig.app.json
tsconfig.json

answered Mar 30, 2021 at 16:19

Syimyk Amatov

1113 silver badges4 bronze badges

1 Comment

tony Over a year ago

This was the only suggestion here that worked for me. This was with Visual Studio Pro rather than VS Code

Eduard Void · Accepted Answer · 2020-06-04 07:12:22Z

3

Another possible reason of issues with resolving aliases can be caused by using include property in main tsconfig file. Default value is ['**/*'] - just add '**/*' to the included paths when you override it. This was my problem, but it was hard to detect that include is causing this.

answered Jun 4, 2020 at 7:12

Eduard Void

2,7041 gold badge16 silver badges14 bronze badges

Comments

Ankit Pandey · Accepted Answer · 2023-03-21 07:19:19Z

1

This might be the issue with the editor so go to tsconfig.editor.json and if you don't have tsconfig.editor.json then create one and there extend your tsconfig.app.json, and after that add "references" in your tsconfig.json and add the path of your tsconfig editor.

tsconfig.editor.json =>

tsconfig.json =>

answered Mar 21, 2023 at 7:19

Ankit Pandey

1064 bronze badges

Comments

Amr · Accepted Answer · 2024-03-16 15:32:08Z

0

To avoid confusion and duplicate code for other developers you can create tsconfig.json then extend the other tsconfig in my example it was tsconfig.lib.json so my tsconfig.json to be

//!for vscode to detect other tsconfigs paths
{
    "extends": "./tsconfig.lib.json",
}

Note: I had to exit Vscode ( cmd+q in mac ) and reopen it for this to take effect

answered Mar 16, 2024 at 15:32

Amr

6938 silver badges17 bronze badges

Comments

Ghostbird · Accepted Answer · 2025-01-08 12:10:28Z

It think the suggestions here to add another tsconfig.json that extends the tsconfig.app.json is a valid one.

However this creates extra files whose purpose is not immediately clear unless you understand this specific interaction between Angular and VSCode Typescript.

I instead opted to rename my tsconfig.app.json, tsconfig.lib.json, and tsconfig.lib.prod.json to tsconfig.json, tsconfig.json and tsconfig.prod.json respectively, both on the file-system and their references in angular.json. The renamed tsconfig.json files are then correctly read and understood by VSCode Typescript.

AFAICS there's no necessity in Angular that the files have these specific names, and it seems completely fine to change them.

Note that the tsconfig.prod.json is still not understood, but is only used by Angular publish compilation. I just renamed it to keep the way the name matches the renamed tsconfig.lib.json → tsconfig.json.

Collectives™ on Stack Overflow

Visual Studio Code can't resolve angular's tsconfig paths

10 Answers 10

6 Comments

Comments

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

Comments

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related