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"（我也尝试过保留默认设置，但没有改变）

---

编辑：

如果我在./tsconfig.json中指定从src开始的paths，那么VSCode就不再报错了，但Angular不行。

如果我在tsconfig.json和src/tsconfig.app.json中都指定了paths，那么VSCode和Angular都能工作，但这似乎是一个太愚蠢的解决方法...

- Doc

---

你尝试将 TSDK 设置为你的项目而不是 NPM 的吗？ - user4676340

是的，没有改变...另外，我修改了我的问题。 - Doc

Answer 1

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

VsCode会自动查找tsconfig.json文件，并且它不关心tsconfig.app.json，因此需要在tsconfig.json中指定paths。

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

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

(作为个人评论，鉴于VsCode被广泛用于构建angular解决方案，我认为应该重新审视angular-cli脚手架或者VsCode搜索tsconfig文件的方式)

- Doc

---

我认为这也是WebStorm混淆的源头。 - s-f

很高兴我找到了这个，否则我会花很长时间才会尝试那个（这没什么意义）。 - Davy

哇塞，这就是答案 :) 我变得沮丧了，因为似乎每个人都通过在tsconfig.app中定位路径或在目录末尾添加通配符来解决这个问题。 - roberto tomás

同时，在VS Code设置中将导入更改为“非相对路径”也是我使其正常工作所必需的步骤。 - Wojciech Owczarczyk

如果我删除baseUrl或将其编辑为"../"，当我使用"npm start"启动应用程序时，它会出现错误。现在我该怎么办？ - Angela P

如果您将 Angular 迁移到 NX Monorepo 中，这也是非常实际的。谢谢！ - simply good

Answer 2

这个回答对我有用。

1. 打开命令面板(Command Palette)并选择 TypeScript: select TypeScript Version ...

2. 选择使用工作区版本(Workspace Version)

希望这个回答可以解决其他遇到同样问题的人的困难。

- Shahryar Saljoughi

Answer 3

看起来 VSCode 只会直接检查你打开的文件夹中的 tsconfig.json 文件，不会像 tsc 那样检查上层文件夹，也不会查看 tsconfig.app.json。所以在某些情况下，由于 VSCode 没有读取 tsconfig.json 文件，可能会缺少 baseUrl。

VSCode 限制在一个固定位置只能有一个 tsconfig.json 已经存在一段时间了，而且似乎很难使其更加灵活：https://github.com/microsoft/vscode/issues/12463（滚动到末尾）

如上所述，在具有多个子项目的 Angular-CLI 脚手架中，这很让人恼火，因为只有一个位于工作区根目录的 tsconfig.json 文件。显然，不同的项目可能在它们的 tsconfig.app.json 中有不同的 baseUrl，这些都不能放在单个根目录的 tsconfig.json 中。

作为解决方法，除了在项目特定的 tsconfig.app.json 中设置 baseUrl 外，我还创建了一个额外的最小化 tsconfig.json 文件用于 VSCode，在子项目的 src 文件夹中使用 "baseUrl":"." 并从那里打开 VSCode。我尚未进行过严格测试，但目前 Angular 编译和 VSCode 智能感知似乎都很满意。

- AndreasS

---

例子呢！ - user1034912

Answer 4

我曾经为这个问题苦苦挣扎很长时间，尝试了互联网上的各种解决方案。项目可以编译，但是VSCode不会遵守我的tsconfig.json中的“paths”声明。

对我最后起作用的是删除我的tsconfig.json文件中的“include”和“exclude”部分

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

- parliament

---

我的 tsconfig 已经工作了很长时间，但在 TS 4.6 中变得愚蠢了。我不得不实际上添加 src include: [ "src/*", "some other paths" ]才能让它恢复生机。 - joe

去掉 include 后问题解决了。 - Mohammad Umair Khan

看起来完全是随机的，但我在一个非angular项目中试过了，它可以工作。我找不到任何方法在mocha测试(/test)中从/src导入而不使用丑陋的相对导入。此外，vscode智能提示也不提供完成。我花了几个小时探索不同的解决方案，最终发现了这个。我想“做得少”通常是一个好答案！ - David Carboni

Answer 5

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

- HungCung

Answer 6

解决别名无法解析的另一个可能原因是在主 tsconfig 文件中使用 include 属性。默认值为 ['**/*'] - 当你覆盖它时，只需将 '**/*' 添加到所包含的路径中即可。

这就是我的问题所在，但很难检测出 include 是造成这个问题的原因。

- Eduard Void

Answer 7

1. 在应用程序中与tsconfig.app.json放置在同一位置创建tsconfig.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

- Syimyk Amatov

Answer 8

这可能是编辑器的问题，所以请前往tsconfig.editor.json文件。如果你没有该文件，请创建一个，并在其中扩展你的tsconfig.app.json, 然后在tsconfig.json中添加"references"，并添加你的tsconfig编辑器的路径。

tsconfig.editor.json =>

tsconfig.json =>

- Ankit Pandey