Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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...

like image 708
Doc Avatar asked Nov 06 '18 13:11

Doc


People also ask

How to check if TypeScript is installed in visual Studio code?

To test that you have the TypeScript compiler tsc installed correctly and a working Hello World program, open a terminal and type tsc helloworld. ts . You can use the Integrated Terminal (Ctrl+`) directly in VS Code. You should now see the transpiled helloworld.

How to disable TypeScript in visual Studio code?

As per here, you can disable built-in extensions in VSCode now. In the Extensions tab on the left (Ctrl+Shift+X), search for @builtin + JavaScript / TypeScript . Then click the little gear icon next to an Extension and click Disable .


2 Answers

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)

like image 86
Doc Avatar answered Sep 20 '22 09:09

Doc


this answer worked for me.

  1. Open Command Palette and select TypeScript: select TypeScript Version ... enter image description here

  2. Select to use Workspace Version enter image description here

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

like image 43
Shahryar Saljoughi Avatar answered Sep 18 '22 09:09

Shahryar Saljoughi