Import Module from Template

[R-Bower]

This ticket was closed despite not having been resolved.

          I'm intending to enable this for external libraries in a future release. I was worried about performance issues, and so I put it on the back burner for a while. (Although the primary motivation is standalone, there's no reason we can't also do it for NgModules)

Originally posted by @dylhunn in #1501 (comment)

I'm posting it again here because this is a major blocker for my transition from WebStorm to vscode. It may seem minor, but my productivity is impacted by this issue.

🚀 feature request

Description

One of the killer features of Webstorm when working with angular is the ability to automatically import NgModules from templates as an auto completion for components, directives and pipes.

It would be fantastic if such a feature could be brought into vsc

Feature Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Describe the solution you'd like

This is probably a tricky problem to solve as it relies on knowing all the possible NgModules (something that even TypeScript struggles with for things like submodules imports of @angular/material) and then adding the import via a code completion to a file that is potentially not open.

The closest thing I can think of that currently exist in vsc is renaming files automatically updating their imports which I believe the TypeScript language service manages.

Describe alternatives you've considered

Use WebStorm instead of vscode.

[dylhunn]

This would be a great feature. It is a performance challenge though, because the DtsMetadataReader needs to be able to enumerate all the selectors found in all directive/component metas in all Dts files.

[m4riok]

Automatic Imports from your own code base make way less sense than imports from an external library. This feature will seriously boost productivity. I too would love to see this implemented in vsc. If performance is an issue perhaps provide an option for loading all / some selectors so the user can choose whether he is willing to suffer the performance penalty in order to have this feature ?

[Martinspire]

I'm not entirely famililar with how webstorm does it, but do you propose something like this:
When you use standalone modules, it doesn't recognize various components when you add them in your template. It would be nice if it automatically updated the imports when you use something in the template that isn't defined yet.

So when I would type <second-component /> then it would automatically update the imports of my component. Same for when I'm using forms that it would automatically update to add FormsModule and stuff like that. And when you removed one, it should also clean it up. Preferrably sort them alphabetically or perhaps modules first and then components and so on.

And for when you aren't using standalone modules, it would be nice if things get imported into the nearest modules file so that you can use it immediately without having to worry about adding it there.

[m4riok]

@Martinspire If I am not mistaken Webstorm does it by maintaining it's own indexes which it builds on startup and updates when changes are made to package.json.

Functionality is exactly as you describe it except it does not automatically remove the import when you remove the selector from the template, only adds it automatically when you add it.

[hatsantos]

I was searching for a VSCode plugin or a way to enable the functionality of importing components or directives directly from the template. For those who have fully embraced standalone components, it's tedious having to manually import each component.

This feature would be excellent to have and would result in an improved DX.