CODEWITHSUNDEEP
angulartypescriptvisual-studio-code
mathpaquette
mathpaquette

Reputation: 436

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

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.

enter image description here

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:

enter image description here

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.

Upvotes: 8

Views: 8756

Answers (5)

DTripodi
DTripodi

Reputation: 129

I know this is a little old, but in case someone else finds themself there - the solution for me has always been to first import the related module for Angular packages.

After adding "HttpClientModule" to app.module.ts, the "Quick Fix"(ctrl/cmd + .) picks up the import.

I've never had to add "typeRoots" to tsconfig.json.

This has worked for me since at least Angular 6 / VS Code version 1.20 (early 2018) - Don't remember testing it explicitly before then.

Upvotes: 0

Tombalabomba
Tombalabomba

Reputation: 480

I had the same problem, tried it with different node and angular versions on different machines. I realized:

VsCode does not autosuggest modules out of the box, even with older versions as far as i can tell. I was under the misconception that it did, since in my work project, suggestions work fine, however now i realize that was only because:

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

So you have to import it once, then vsCode starts suggestions, which means only one time pain.

Still setting up a new project can be tedeous that way, i will use webstorm(suggests everything out of the box) as a setup IDE, then if my project as enough imports, i can still switch back to vsCode.

edit: spelling/formatting

Upvotes: 1

Marius Mihail
Marius Mihail

Reputation: 459

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

Upvotes: 2

Giacomo Cerquone
Giacomo Cerquone

Reputation: 2478

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.

Upvotes: 2

Andriy Chuma
Andriy Chuma

Reputation: 434

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.

Upvotes: 7

Related Questions