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

回答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)

回答2:

I encountered a similar situation with Visual Code and Angular 7

ORIGINAL CODE (valid path, from a book example):

import { Stock } from 'app/model/stock'; 

ERROR:

Failed to compile. ./src/app/app.component.ts Module not found: Error: Can't resolve 'app/model/stock'... 

"CORRECTED" CODE:

import { Stock } from './model/stock'; 

文章来源: Visual Studio Code can't resolve angular's tsconfig paths