Visual Studio Code无法解析angular的tsconfig路径 [英] Visual Studio Code can't resolve angular's tsconfig paths

问题描述

我正在尝试使用buckets和tsconfigs paths选项导入一些服务，但是我无法使用angular和vscode进行相处.

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

我的情况似乎很简单:

我在src/app/services中有一个在index.ts中导出的​​服务
• 我的src/tsconfig.app.json就是这样:

• 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"
  ],
}

和我的角度应用程序编译没有问题，但是每次我尝试从'services'导入服务给我[ts] Cannot find module 'services'.

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

为什么?

我使用的是打字稿3.1.6，在vscode设置中，我有"typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib"(我也尝试过保留默认设置，未做任何更改)

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)

如果我从src开始在./tsconfig.json中指定paths，则vscode很高兴，但是角度不满意.

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

如果我在tsconfig.json和src/tsconfig.app.json中都指定了paths，则vscode和angular都很满意，但是对我来说这似乎是一个愚蠢的解决方法...

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自动查找tsconfig.json文件，而不关心tsconfig.app.json，因此需要在tsconfig.json中指定paths.

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.

与此同时，angular-cli脚手架在tsconfig.app.json中指定了一个baseUrl参数，该参数会覆盖上面的参数.

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

解决方案是删除tsconfig.app.json 中的baseUrl参数或将其值编辑为"../"

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

(作为个人评论，鉴于vscode主要用于构建角度解决方案，我认为应在angular-cli脚手架或vscode查找tsconfig文件的方式中重新审视某些东西)

(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)

这篇关于Visual Studio Code无法解析angular的tsconfig路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！