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:
src/app/services
I have a service which is exported in a index.tssrc/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...
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)