Visual Studio 代码无法解析 angular 的 tsconfig 路径

Question

我正在尝试使用 barrels 和 tsconfigs paths 选项导入一些服务，但我无法让 angular 和 vscode 相处。

如果它对一个有效，则对另一个无效，反之亦然...

我的情况好像很简单：

in src/app/services 我有一个导出到 index.ts
我的src/tsconfig.app.json就是这样：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": ".",
    "paths": {
      "services": ["app/services"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
}

和我的angular应用程序编译没有问题，但是vscode每次我尝试从[=16导入我的服务时总是给我错误=] 给我 [ts] Cannot find module 'services'.

为什么？

我使用的是 typescript 3.1.6，在 vscode 设置中我有 "typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib"（我也尝试保留默认设置，没有更改）

编辑：

如果我从 src 开始在 ./tsconfig.json 中指定 paths，vscode 是快乐的，但 angular 不是。

如果我在 tsconfig.json 和 src/tsconfig.app.json 中指定 paths，vscode 和 angular 都会很高兴，但这似乎是一个太愚蠢的解决方法我...

Answer 1

我想通了，即使我一直认为这很荒谬...

VsCode自动查找tsconfig.json文件，不关心tsconfig.app.json，所以paths需要在tsconfig.json中指定。

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

解决方法是删除tsconfig.app.json中的baseUrl参数或将其值修改为"../"

（作为个人评论，鉴于 vscode 主要用于构建 angular 解决方案，我认为应该在 angular-cli 脚手架或vscode 如何查找 tsconfig 文件）

Answer 2

似乎VSCode 仅检查tsconfig.json 直接 在您打开的 文件夹中。它不会像 tsc 那样检查上面的文件夹，也不查看 tsconfig.app.json。所以在某些情况下 baseUrl 可能会丢失，因为 VSCode 根本没有读取 tsconfig.json.

VSCode 对固定位置的单个 tsconfig.json 的限制已经存在了一段时间，似乎要使其更灵活并不容易： https://github.com/microsoft/vscode/issues/12463 （滚动到末尾）

如上所述，这在 Angular-CLI 脚手架中很烦人，其中有多个子项目，工作区的根目录下只有一个 tsconfig.json。显然，这些项目的 tsconfig.app.json 中可能有不同的 baseUrls，不能全部放在根部的单个 tsconfig.json 中。

作为解决方法，除了 tsconfig.app.json 中的项目特定 baseUrl 之外，我还在子目录的 src 文件夹中为 VSCode 创建了一个额外的最小 tsconfig.json使用 "baseUrl":"." 项目并从那里打开 VSCode。我没有对此进行严格测试，但到目前为止 Angular 编译和 VSCode intellisense 似乎都很开心。

Answer 3

如果您使用项目 Angular，请将 baseUrl 和 paths 放在 tsconfig.json 而不是 tsconfig.app.json。

Answer 4

解决别名问题的另一个可能原因是在主 tsconfig 文件中使用 include 属性。默认值为 ['**/*'] - 覆盖它时只需将 '**/*' 添加到包含的路径中。这是我的问题，但很难检测到是 include 引起的。

Answer 5

在 tsconfig.app.json 附近的应用程序中创建 tsconfig.json。
添加下一个设置

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
       /* your_paths */
    }
  }
}

在你的 tsconfig.app.json 和 tsconfig.spec.json 上重写 "extends": "./tsconfig.json"

最终文件结构

projects
  your_application
    tsconfig.json
    tsconfig.spec.json
    tsconfig.app.json
tsconfig.json

Answer 6

这个对我有用。

打开命令面板和selectTypeScript: select TypeScript Version ...
Select 使用 Workspace 版本

希望这个回答能解决其他人面临同样问题的问题。

Answer 7

我为这个问题苦苦挣扎了很长时间，并且尝试了互联网上几乎所有的解决方案。该项目可以编译，但 VSCode 不会遵守我的 tsconfig.json.

中的“路径”声明

最终为我修复的是删除 tsconfig.json

的“包含”和“排除”部分

我不确定这两个问题中的哪一个是问题，但删除这两个问题最终解决了我的 long-standing 问题。

Visual Studio 代码无法解析 angular 的 tsconfig 路径

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

typescript

tsconfig

visual-studio-code

vscode-settings

angular