typescript 在项目中手动导入之前,VSCode IntelliSense不建议Angular模块

n3h0vuf2  于 2023-06-24  发布在  TypeScript
关注(0)|答案(5)|浏览(157)

首先,你必须明白,我正在从IntelliJ切换到VSCode(也许我对IntelliJ寻找模块的方式太舒服了)。
我将主要使用VSCode来开发由Angular CLI生成的Angular应用程序。
从一个新的CLI生成的应用程序开始,在一个新的VSCode安装中打开项目(删除了设置和所有扩展)我意识到我需要在VSCode IntelliSense意识到它们之前手动导入任何Angular模块。
例如:假设我需要创建2个Angular服务。两者都需要HttpClient来获取数据。在第一个示例中,我更改了构造函数属性以注入它。当按快捷键(CTRL + .)时,我只得到一个建议,即从selenium-webdriver导入HttpClient。

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

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

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

这是预期的行为还是我做错了什么?已经在3个不同的系统上尝试过,结果相同。我希望IntelliSense能稍微删除HttpClient上下文的智能。
这对于任何模块都是一样的,这意味着您需要在VSCode意识到它之前手动导入一次。

vhmi4jdf

vhmi4jdf1#

到目前为止,我找到的唯一解决方案是将Angular包的路径添加到tsconfig.jsontypeRoots中。下面是一个例子:

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

这样,除了node_modules/@types之外,TypeScript还会查看node_modules/@angular文件夹及其子文件夹中的类型定义。
根据TypeScript文档:
如果指定了typeRoots,则只包含typeRoots以下的包。
我真的不知道为什么Angular文档中没有提到这个问题,这是正确的,但在类型发现方面听起来有点不完整:
许多库在其npm包中包含定义文件,TypeScript编译器和编辑器都可以在其中找到它们。Angular就是这样一个库。任何Angular应用程序的node_modules/@angular/core/文件夹都包含几个描述Angular部分的d. ts文件。
对于包含d. ts文件的库包,您不需要执行任何操作来获取类型文件。Angular包已经包含了它们。

zujrkrfu

zujrkrfu2#

我复制,理解并解决了这个问题,实际上在提示中有httpClient的东西,你还必须添加node_modules/@angular/common/http。这与他们导出类型定义的方式有关,你可以找到我的问题,你可以用更多的信息支持它为什么会发生,并很快在这里发布PR来解决这个问题https://github.com/angular/angular/issues/35237
无论如何,为了重现这个,你也可以去stackblitz,试着输入“httpc”,你不会看到任何建议。

sz81bmfz

sz81bmfz3#

提到@Andriy Chuma的回答,对我有用的是添加
"node_modules/@angular/common/http"
在…的末尾
compilerOptions
tsconfig.json中:

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

现在VSCode intellisense自动完成每当我尝试将HttpClientModule导入任何文件

bn31dyow

bn31dyow4#

我遇到了同样的问题,在不同的机器上用不同的节点和Angular 版本尝试了它。我意识到:
VsCode不会自动建议开箱即用的模块,就我所知,即使是旧版本。我误以为它确实如此,因为在我的工作项目中,建议工作得很好,但现在我意识到这只是因为:

VsCode needs the module to be imported at least once 
(does not matter where) to suggest it everywhere.

所以你必须导入一次,然后vsCode开始建议,这意味着只有一次痛苦。
仍然设置一个新的项目可以tedeous这样,我将使用webstorm(建议一切开箱即用)作为设置IDE,然后如果我的项目作为足够的进口,我仍然可以切换回vsCode。
编辑:拼写/格式

nfs0ujit

nfs0ujit5#

我知道这有点旧了,但如果其他人发现自己在那里-对我来说,解决方案一直是首先导入Angular包的相关模块。
将“HttpClientModule”添加到app. modal.ts后,“QuickFix”(ctrl/cmd + .)将获取导入。
我从来没有在tsconfig.json中添加“typeRoots”。
至少从Angular 6 / VS Code版本1.20(2018年初)开始,这对我来说就起了作用--不记得在那之前明确测试过它。

相关问题