angular - VSCode IntelliSense 不会建议 Angular 模块，除非在项目中手动导入

Question

首先你必须明白我正在从 IntelliJ 切换到 VSCode(也许我对 IntelliJ 寻找模块的方式太满意了)。

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

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

示例:假设我需要创建 2 个 Angular 服务。两者都需要 HttpClient 来获取数据。在第一个中，我更改构造函数属性以注入(inject)它。当按“快速修复”快捷键 (CTRL + .) 时，我只得到一个建议，即从 selenium-webdriver 导入 HttpClient。

仍然在第一个服务中，我手动添加了 Angular HttpClient 导入:

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

转到第二个服务，更改构造函数以相同的方式添加 httpClient 属性，现在按“快速修复”快捷键时我得到了更多结果:

这是预期的行为还是我做错了什么？已经在 3 个不同的系统上尝试过，结果相同。我期待 IntelliSense 对 HttpClient 上下文的智能程度有所降低。

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

Answer 1

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

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

这样，除了 node_modules/@types 之外，TypeScript 还会在 node_modules/@angular 文件夹及其子文件夹中查找类型定义。

根据TypeScript docs :

If typeRoots is specified, only packages under typeRoots will be included.

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

Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.

You don't need to do anything to get typings files for library packages that include d.ts files. Angular packages include them already.