Visual Studio Code can't resolve angular's tsconfig paths
Solution 1
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)
Solution 2
this answer worked for me.
Hope this answer solves problem of others facing the same problem.
Solution 3
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.
Solution 4
In case you work with project Angular, let place baseUrl
and paths
in tsconfig.json
instead of tsconfig.app.json
.
Solution 5
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.
Doc
Okay move along, move along people, there's nothing to see here!
Updated on July 09, 2022Comments
-
Doc almost 2 years
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 fromsrc
, vscode is happy but angular is not.if I specify
paths
in bothtsconfig.json
andsrc/tsconfig.app.json
, both vscode and angular are happy, but it seems a too stupid workaround to me... - in
-
s-f over 5 yearsI think it's also source of confusion for WebStorm
-
Davy over 5 yearsGlad i found this, it would have taken a while before i would have tried that (makes little sense)
-
roberto tomás about 5 yearsholy 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..
-
Funky coder over 4 yearsAlso changing the imports to "non-relative" in VS Code setting was a required to step to make this work for me
-
user1034912 about 4 yearsExamples please!
-
Angela P about 4 yearsif I delete baseUrl or edit to "../" it breaks when I start the app with "npm start" what should I do now?
-
simply good almost 3 yearsThis also is strongly actual if you migrated Angular to NX monorepo. Thank you!