VSCode IntelliSense doesn't suggest Angular modules until imported manually in the project

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

Answer 1

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 2

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.