Visual Studio Code 无法解析 Angular 的 tsconfig 路径

Question

我正在尝试使用 Barrels 和 tsconfigs

paths

选项导入一些服务，但我无法让 Angular 和 vscode 相处。

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

我的情况似乎很简单：

• 在

  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 应用程序编译没有问题，但是每次我尝试从

'services'

导入我的服务时，vscode 总是给我错误，给我

[ts] Cannot find module 'services'.

为什么？

我使用的是 typescript 3.1.6，在 vscode 设置中我有

"typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib"

（我也尝试保留默认设置，没有更改）

---

编辑：

如果我从

paths

开始在

./tsconfig.json

中指定

src

，vscode 会很高兴，但 Angular 却不会。

如果我在

paths

和

tsconfig.json

中指定

src/tsconfig.app.json

，vscode 和 Angular 都很高兴，但对我来说这似乎是一个太愚蠢的解决方法......

Answer 1

我想通了，即使我一直认为那是荒谬的......

VsCode 会自动查找

tsconfig.json

文件，它并不关心

tsconfig.app.json

，因此需要在

paths

中指定

tsconfig.json

。

同时，Angular-cli脚手架在

baseUrl

中指定了一个

tsconfig.app.json

参数，它会覆盖上面的参数。

解决方案是删除

baseUrl

中的

tsconfig.app.json

参数或将其值编辑为

"../"

（作为个人评论，鉴于 VSCode 主要用于构建 Angular 解决方案，我认为应该在 Angular-CLI 脚手架或 VSCode 如何查找 tsconfig 文件中重新审视一些内容）

Answer 2

这个答案对我有用。

1. 打开命令面板并选择

   TypeScript: select TypeScript Version ...

   

2. 选择使用工作区版本

希望这个答案可以解决其他面临同样问题的人的问题。

Answer 3

看起来 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

。显然，这些项目的 

baseUrls

 中可能有不同的 

tsconfig.app.json

，它们不能全部放在根部的单个 

tsconfig.json

 中。

作为一种解决方法，除了

baseUrl

 中的项目特定 

tsconfig.app.json

 之外，我还使用 

tsconfig.json

 在子项目的 src 文件夹中为 VSCode 创建了一个额外的最小 

"baseUrl":"."

，并从那里打开 VSCode。我还没有对此进行严格的测试，但到目前为止 Angular 编译和 VSCode 智能感知似乎都很满意。

Answer 4

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

最终为我解决的问题是删除 tsconfig.json 的“包含”和“排除”部分

我不确定这两个问题中的哪一个是问题所在，但删除两者最终解决了我长期存在的问题。

Answer 5

如果您使用 Angular 项目，请将

baseUrl

 和 

paths

 放在 

tsconfig.json

 中，而不是 

tsconfig.app.json

。

Answer 6

1. 在您的应用程序中靠近 tsconfig.json

    处创建 

   tsconfig.app.json

   。

2. 添加下一个设置

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

3. 在您的tsconfig.app.json

   和

   tsconfig.spec.json

   中重写

   "extends": "./tsconfig.json"

---

最终文件结构

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

Answer 7

解决别名问题的另一个可能原因可能是在主 tsconfig 文件中使用 include 属性造成的。默认值是

['**/*']

 - 当您覆盖它时只需将 '**/*' 添加到包含的路径中。
这是我的问题，但很难检测到包含导致了这个问题。

Answer 8

这可能是编辑器的问题，所以转到 tsconfig.editor.json，如果您没有 tsconfig.editor.json，则创建一个并扩展您的 tsconfig.app.json，然后在中添加“引用”你的 tsconfig.json 并添加你的 tsconfig 编辑器的路径。

tsconfig.editor.json =>

tsconfig.json =>

Answer 9

为了避免其他开发人员混淆和重复代码，您可以创建

tsconfig.json

，然后扩展我的示例中的其他 tsconfig，它是 

tsconfig.lib.json

，所以我的 

tsconfig.json

 是

//!for vscode to detect other tsconfigs paths
{
    "extends": "./tsconfig.lib.json",
}

注意：我必须退出 Vscode（在 mac 中为

cmd+q

）并重新打开它才能生效