VSCode IntelliSense 不建议 Angular 模块，直到在项目中手动导入

Question

首先你必须明白我正在从 IntelliJ 切换到 VSCode（也许我对 IntelliJ 寻找模块的方式感到太舒服了）。

我将主要使用 VSCode 来开发由 Angular CLI 生成的 Angular 应用程序。

从一个新的 CLI 生成的应用程序开始，在全新的 VSCode 安装中打开项目（删除了设置和所有扩展）我意识到我需要在 VSCode IntelliSense 意识到它们之前手动导入任何 Angular 模块。

示例： 假设我需要创建 2 个 Angular 服务。两者都需要 HttpClient 来获取数据。在第一个上，我更改了构造函数属性以注入它。当按下 Quick Fix 快捷方式 (CTRL + .) 时，我只收到一个建议，即从 selenium-webdriver 导入 HttpClient。

还是在第一个服务中，我手动添加了 Angular HttpClient 导入：

import { HttpClient } from '@angular/common/http';

转到第二个服务，更改构造函数以以相同方式添加 httpClient 属性，现在按下 Quick Fix 快捷方式时我得到了更多结果：

这是预期的行为还是我做错了什么？已经在 3 个不同的系统上尝试过，结果相同。我期待 IntelliSense 有点删除关于 HttpClient 上下文的智能。

这对于任何模块都是一样的，这意味着您需要手动导入一次，然后 VSCode 才会意识到它。

Answer 1

提到@Andriy Chuma 的回答，对我有用的是添加

"node_modules/@angular/common/http"

在结尾

compilerOptions块

在tsconfig.json:

"typeRoots": [
  "node_modules/@types",
  "node_modules/@angular",
  "node_modules/@angular/common/http"
]

现在，每当我尝试将 HttpClientModule 导入任何文件时，VSCode 智能感知都会自动完成

Answer 2

我复制、理解并解决了这个问题，实际上要在提示中包含 httpClient 的内容，您还必须添加 node_modules/@angular/common/http。 这与他们导出类型定义的方式有关，您可以找到我的问题，您可以通过更多信息来投票，了解为什么会发生这种情况，很快就会有一个 PR 来解决这个问题https://github.com/angular/angular/issues/35237

无论如何，要重现此内容，您也可以前往 stackblitz 并尝试输入“httpc”，但您不会看到任何建议。

Answer 3

到目前为止，我发现的唯一解决方案是将 Angular 包的路径添加到 typeRoots 的 tsconfig.json 中。这是一个例子：

"typeRoots": ["node_modules/@types", "node_modules/@angular"]

这样，除了 node_modules/@types，TypeScript 还会查看 node_modules/@angular 文件夹及其子文件夹以进行类型定义。

根据TypeScript docs：

如果指定typeRoots，则仅包含typeRoots 下的包。

我实际上不知道为什么在 Angular documentation 中没有提到这件事，这是正确的，但在打字发现方面听起来有点不完整：

许多库在其 npm 包中包含定义文件，TypeScript 编译器和编辑器都可以在其中找到它们。 Angular 就是这样一个库。任何 Angular 应用程序的 node_modules/@angular/core/ 文件夹都包含几个描述 Angular 部分的 d.ts 文件。

您无需执行任何操作即可获取包含 d.ts 文件的库包的类型文件。 Angular 包已经包含了它们。