Language Service: Automatic Import Improvements

[dylhunn]

I recently implemented auto-imports in the language service in https://github.com/angular/angular/pull/47088. This feature includes the scaffolding for a large number of possible improvements, tracked below. We should prioritize some of these to make the experience as excellent as possible.

• ✅ (15.0.0) Automatic Quickfix Imports: Suggest imports as a quick fix for unknown standalone components.
• ✅ (15.0.0) NgModule support: Support importing to and from NgModules, in addition to standalone components.
• ✅ (15.1.0) Multi-suggestions: If more than one directive has this selector, give the user a choice.
• 🚧 (15.1.0) Pipes: Support pipes as well as directives.
• 🗓️ (15.1.0) Declaration Files: Suggest directives from .d.ts files, including imports with @ specifiers.
• 🗓️ (15.1.0) Builtin Directives: We should suggest first-party Angular directives when appropriate.
• 🗓️ (15.1.0) Smart import tracking: Recommend imports consistent with existing code, especially with barrel files.
• ⬜️ Autocomplete while typing: In addition to "quick fix," suggest imports while the user types selectors.
• ⬜️ Attribute selectors: Support selectors not in the main element tag position.
• ⬜️ Better formatting support: Invest in making language service generated code always match user formatting.

✅ Complete | 🚧 In Progress | 🗓️ Planned

Collected PRs Relevant to this Hotlist Language Service: #47181, #47088, #47787, #47938, #48074 Compiler: #47180, #47166, #47561, #47631, #48090

[kbrilla]

Is the code behind this feature using typescript auto-import rules? [https://github.com/microsoft/TypeScript/issues/51155](Auto-import priority rules) There are some issues right now in TS when for example monorepors like nx are involved where relative paths are proposed instead of @my-lib/... even if they are properly exported in barrels.

[dylhunn]

@kbrilla

Is the code behind this feature using typescript auto-import rules?

Not at present. I may switch to using the TypeScript compiler to emit some import references -- I need to do more research into how this works.

In general, we can always emit a same-project relative path, but figuring out absolute specifiers is much trickier.

[JeanMeche]

Awesome work !

Btw you might want to consider #48689 which have been opened recently !

[dylhunn]

Thanks. I hadn't actually seen that issue yet.

[Akxe]

What do I need to do in order to enable this in my codebase? I am using Angular 15.1 with nx monorepo

[kbrilla]

Any progress on this one? Seems like Webstorm is once again ahead of angular language service

[rezoled]

What's the current status and roadmap? We are currently running with language service 16.1 and it seems like a lot of features are missing, which makes it really difficult to us to migrate to VSCode from IntelliJ. Specifically

• Auto imports of components based on tsconfig paths declaration.
• Component suggestions

[fMoro1999]

Hi, are there any news on this?