VSCode IntelliSense除非在项目中手动导入，否则不建议使用Angular模块 [英] VSCode IntelliSense doesn't suggest Angular modules until imported manually in the project

问题描述

首先，您必须了解我正在从IntelliJ切换到VSCode(也许我对IntelliJ寻找模块的方式感到很舒服).

First you have to understand that I'm switching from IntelliJ to VSCode (Maybe I was too comfortable the way IntelliJ was looking for modules).

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

I'll mostly use VSCode for developing Angular app generated by the Angular CLI.

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

Starting from a new CLI generated app, open the project in a fresh VSCode installation (removed the settings and all extensions) I realized that I need to manually import any Angular modules before VSCode IntelliSense getting aware of them.

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

Example: Let say I need to create 2 Angular services. Both will require HttpClient to fetch data. On the first one, I change the constructor properties to inject it. When pressing the Quick Fix shortcut (CTRL + .) I'm getting only one suggestion which is to import the HttpClient from selenium-webdriver.

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

Still in the first service, I added Angular HttpClient import manually:

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

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

Going to the second service, change the constructor to add the httpClient property the same way and now I'm getting much more results when pressing the Quick Fix shortcut:

是预期的行为还是我做错了什么?已经在3个不同的系统上尝试过此方法，并且结果相同.我期望IntelliSense会稍微删除有关HttpClient上下文的知识.

Is that the expected behavior or I got something wrong? Already tried this on 3 different systems and same result. I was expecting the IntelliSense a bit remove intelligent about the HttpClient context.

对于任何模块来说都是相同的，这意味着您需要在VSCode意识到之前手动进行一次导入.

This is the same for any modules, meaning you need to manually import once before VSCode getting aware of it.

推荐答案

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

The only solution I've found so far is adding the path to Angular packages into typeRoots of tsconfig.json. Here's an example:

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

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

That way, apart from node_modules/@types, TypeScript looks into the node_modules/@angular folder and its subfolders for type definitions.

根据 TypeScript文档:

如果指定了typeRoots，则仅包含typeRoots下的软件包.

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

我实际上不知道为什么在 Angular文档中没有提及该问题的原因，这是正确的，但在键入发现方面听起来有点不完整:

I don't actually know why nothing was mentioned on that matter in the Angular documentation, which is correct but sounds a bit incomplete in terms of typing discovery:

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

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.

您无需执行任何操作即可获取包含d.ts文件的库软件包的键入文件. 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.

这篇关于VSCode IntelliSense除非在项目中手动导入，否则不建议使用Angular模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！