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

Question

我正在尝试使用桶和 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"（我也尝试保留默认设置，没有更改）

---

编辑：

如果我从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

这个answer 为我工作。

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。显然，这些项目的tsconfig.app.json 中可能有不同的baseUrls，它们不能都放在根目录下的单个tsconfig.json 中。

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

---

最终文件结构

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