Type definitions not exported correctly for vscode (intellisense not working on clean projects)

[giacomocerquone]

I tried searching everywhere for this issue but actually very few people noticed it (to my surprise).
The only thing I could find is this stackoverlow question

🐞 bug report

Affected Package

The issue is caused by package @angular/....

Is this a regression?

I don't think so, as far as I can recall IntelliSense on vscode never worked but it's a very subtle issue (for this reason I'm not sure when this started or if it has always been like this).
In fact, just a few people noticed this behavior because vscode seems to be smart enough to remember and understand after the first manual import

Description

Vscode has two ways to provide hints through IntelliSense to the developer (you can read it here):

It can either look for the node_modules/@types folder or get the type definition file in the package.json, under the "typings" or "types" key (the first way is more suited for non ts libraries/frameworks).

You enforce the first one through your cli when calling ng new my-app in tsconfig.json we find:

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

but in all the new angular projects generated by the cli, the @types folder is missing the angular types:

Relating this behavior to how React handles this, for example, isn't ok. With React we correctly get suggestions and the type definitions file appear correctly in the @types folder:

So, knowing that maybe pointing typeRoots to the node_modules/@angular folder would solve the problem, an attempt I've done is to include it there.
Problem solved partially, why? Because then all the routing stuff were importable, but still not the http stuff.

How come?
Because vscode is looking at your package.json files available in the node_modules/@angular folder, with the router, everything's ok:

but not with the common package.json:

since the common.d.ts file has no reference for many stuff like, for example, the httpclient module:

🔬 Minimal Reproduction

See yourself, open stackblitz with a blank project: https://stackblitz.com/fork/angular
and write HttpC (press ctrl+space too that is usually the command to make the hints show up) and see that no correct suggestion is shown.

Anything else relevant?

I will put up a PR exporting all the needed definitions directly from the common.d.ts file and please, edit your cli to generate the tsconfig.json including node_modules/@angular

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.1
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[giacomocerquone]

@AndrewKushnir you'll fix this or I put up a PR? I'm not getting it since you assigned it to someone else

[alan-agius4]

I don’t thinking adding node_modules/@angular in typeRoots is the correct fix. typeRoots is meant to be used for declarations in the global namespace. Angular is not.

I think this needs some digging to determine the course of action needed.

[kyliau]

@alan-agius4 is right, according to the TypeScript handbook:

Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & node_modules/@types folders to find the foo package.

Based on my understanding of TypeScript language service, I think it is able to do automatic import only if it already knows that the symbol is available somewhere in the current program.
In this case, @angular/common/http is not in the program, since it is not used anywhere (directly or transitively) in the code. You'll have to at least manually import it the first time for the symbol to be visible.

That said, I don't see any major downsides adding node_modules/@angular to typeRoots to help with automatic imports specifically. I think the CLI team has more insights into this and can do a better job arguing if this is a good / bad idea.

[kyliau]

I did a quick check to see how many dependency gets added to the program by including node_modules/@angular in typeRoots. It went from 301 to 341 for a ng new program. However, this does not include embedded packages like @angular/common/http.

[alan-agius4]

I think the downside would be that the more packages add to the “global” state the slower the IDE would be because every time the TS server gets initialised, TS will need to resolve and scan all the definitions found specified in the typeRoots.

At least from what I understand on how this works. @kyliau correct me if I am wrong 😁

Edit: Installing @angular/material will probably include quite a lot of dependencies in the TS program.

[kyliau]

Yes, adding node_modules/@angular and its embedded packages to typeRoots is a trade-off between convenience and performance. If we want the editor to be smarter, it'll have to do more work. There's no way to get around that.

Like @alan-agius4 mentioned, there's also the question of how many packages should be added to the typeRoots and whether it'll be beneficial to all users.

[giacomocerquone]

If you add node_modules/@angular you still not getting auto import for httpclient module (and other stuff I suppose), so that is a fix to be done somehow for sure.
Editors like webstorm already give completion on all the angular suite, so honestly I don't think here there will be any problem bumping from 301 to even 500 let's say.

Plus you can always write that down in the angular doc and not adding it by default in the tsconfig

[giacomocerquone]

@kyliau And I'm wondering, after the first manual import, the overhead of picking up all the packages isn't the same as adding it initially in the typeroots?

[kyliau]

Manual import would not pick up all the packages. It'd only pick up declaration files in the package that was imported. In the case of @angular/common/http, only two files get added:

• .../node_modules/@angular/common/http/http.d.ts
• .../node_modules/@angular/common/http.d.ts

Compare that to adding node_modules/@angular to typeRoots, which added 40 files.

[clydin]

This seems more like a feature request for TypeScript and/or vscode (or maybe even the angular language service). I think to do this properly, it would need to be done at runtime and walk the node dependency graph of the project looking for entrypoints. Otherwise it will quickly become out of date, partially functional, and inconsistent between dependencies.

This is also editor specific, whereas the TS config files are primarily build time configurations. These additions have the potential to cause longer and higher memory usage builds.

[giacomocerquone]

I honestly don't know, I wish the editors' world at least wasn't so damn nasty.
For sure I don't think it should be that complicated, we have typescript for autocompletion too!
I showed a react example, also rxjs works in the same manner and if we can consider angular as a modularized framework (having many optional installable packages) I think it shouldn't be any different.

Watching Vue, for example, they made intellisense work through a vscode extension https://github.com/vuejs/vetur but it's quite strange that for angular I couldn't find even one of them working.

[sylvaingirardbe]

I think I'm running into the same issue with a MaterialModule I'm making, which just imports all the @angular/material components and exports them again. In material 8 they used to be in @angular/material and now they are all in their own module, ie @angular/material/button. With this issue it's a real pain to manually write all the import statements since vscode doesn't find the module to automatically import it. Adding node_modules/@angular to typeRoots doesn't fix it.

[AJHanekom]

Hey, also getting this.

Any ideas how to resolve this? Currently using a fresh 9.1.9 project with vscode.

[maximedasilva]

Hi,
I finally found out,
Angular creates a tsconfig.app.json that extends tsconfig.json and add

 "types": []

According to Typescript:

If types is specified, only packages listed will be included in the global scope.
(Full page here)

So removing this line resolved the imports problems.
Hope this will work for you !

[kyliau]

typescript is working on fixing the auto-import issue that's described in this ticket ;)
microsoft/TypeScript#38923

[panchoggit]

ANy solution?

same issue

[panchoggit]

Hi,
I finally found out,
Angular creates a tsconfig.app.json that extends tsconfig.json and add

 "types": []

According to Typescript:

If types is specified, only packages listed will be included in the global scope.
(Full page here)

So removing this line resolved the imports problems.
Hope this will work for you !

this not working for me, please explain..

[alan-agius4]

Closing as this should is fixed in TypeScript 4.0 which is supported in now supported in version 10.1.0-next.7.

[panchoggit]

Closing as this should is fixed in TypeScript 4.0 which is supported in now supported in version 10.1.0-next.7.

yes classes and components generated by cli or manually are suggested.
but not working with by example: HttpClient or HttpCLientModule, never suggesteds...by intellisense.......

Router, ActivatedRoute, FormsModule and ReactiveFormsModule working with auto import and suggest intellisense

something interesante:

HttpClientModule and HttpClient are located in @angular/common/http <<----subfolder http inside common folder

Router, ActivatedRoute, FormsModule and ReactiveFormsModule are located in @angular/router @angular/forms <<-- not subfolder...

Tested with 10.1.0-RC.0
Vscode 1.48.2
Typscript 4.0.2 and TypeScript@next 4.1.0-dev....

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}