在项目中手动导入之前，VSCode IntelliSense 不建议使用 Angular 模块

Question

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).

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

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.

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.

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

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

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:

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.

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

Answer 1

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"]

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

According to the TypeScript docs :

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

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:

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.

Answer 2

I reproduced, understood and solved this problem and actually to have the httpClient stuff in the hints, you've to add also the node_modules/@angular/common/http . This has to do with the way they export the type definitions, you can find my issue that you can upvote with further information on why it happens exactly and shortly a PR to solve this here https://github.com/angular/angular/issues/35237

Anyway, to reproduce this you can also just head over to stackblitz and try to input "httpc" and you'll see no suggestion.

Answer 3

Yes you are correct, i have faced this many times during building demos for workshops. Problem was with Visual Studio Code's Autoimport plugin importing HttpClient class from

'../../node_modules/@types/selenium-webdriver/http'

instead of

'../../node_modules/@angular/common/http'

Answer 4

Mentioning @Andriy Chuma's answer, what worked for me was adding

"node_modules/@angular/common/http"

at the end of

compilerOptions block

in tsconfig.json :

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

Now VSCode intellisense autocompletes whenever I try to import HttpClientModule into any file