Angular Auto-Import for VS Code

Streamline your Angular development with intelligent, automatic imports for components, directives, and pipes directly in your HTML templates and TypeScript files.

Features

• ⚡️ Automatic Imports: Get quick fix suggestions to import Angular elements that are not yet included in your component's module.
• 🚀 Fix All Command: Automatically import all missing Angular elements in the current file with a single command.
• 💡 Smart Completions: Autocomplete for component tags, directives, and pipes in HTML templates (.html) and inline templates within TypeScript files.
• 🔍 Diagnostics: Identifies unknown Angular elements in your templates and provides quick fixes.
• 📦 External Library Support: Auto-import components, directives, and pipes from external packages (both standalone and module-based).
• Monorepo Support: Works seamlessly with multi-project workspaces, like Nx.
• Path Alias Resolution: Understands tsconfig.json path aliases (@app/*, @shared/*, etc.) for correct import path generation.
• Standalone Component Support: Works with both module-based and standalone Angular components, directives, and pipes.

Installation

Install "Angular Auto Import" from the Visual Studio Code Marketplace:

Install Extension

Alternatively, search for Angular Auto Import in the VS Code Extensions view (Ctrl+Shift+X or Cmd+Shift+X).

Usage

Automatic Quick Fixes

When you use an Angular component, directive, or pipe in your template that hasn't been imported into the corresponding NgModule or component's imports array, the extension will display a squiggly line (based on your configured diagnostics severity).

1. Hover over the unknown element (tag, attribute, or pipe).
2. Click the lightbulb icon or press Ctrl+. (Cmd+. on macOS) to see available Quick Fixes.
3. Select the import suggestion (e.g., Import MyComponent from './my.component').

The extension will automatically add the necessary import statement to your TypeScript file and include the component/directive/pipe in your @NgModule's imports array or your standalone component's imports array.

Smart Completions

Start typing an Angular element selector (e.g., <my-component, [myDirective], | myPipe) in your HTML or inline TypeScript template. The extension will provide completion suggestions.

Configuration

You can customize the extension's behavior via VS Code settings (settings.json):

Troubleshooting

• Elements not found: If elements are not being auto-imported, try running the Angular Auto Import: Reindex Project(s) command. If issues persist, use the Angular Auto Import: Clear Cache command to completely reset the cache.
• Performance issues: For very large projects, consider increasing angular-auto-import.index.refreshInterval or setting angular-auto-import.projectPath to a specific sub-project root (e.g., src/ folder to skip node_modules).
• Incorrect imports: Ensure your tsconfig.json baseUrl and paths are correctly configured.

Commands

The following commands are available from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

• Angular Auto Import: Fix all missing imports in current file: Automatically imports all components, directives, and pipes that are used in the current file but not yet imported.
• Angular Auto Import: Reindex Project(s): Manually triggers a reindex of your project to discover all available Angular elements.
• Angular Auto Import: Clear Cache: Clears the extension's cache. Use this if you encounter persistent issues.
• Angular Auto Import: Show Logs: Opens the extension's output channel to view logs.
• Angular Auto Import: Show Performance Metrics: Displays a panel with memory and CPU usage statistics.

Limitations

While Angular Auto Import aims to simplify your development experience, there are some limitations to be aware of:

Standalone Projects Only: This extension is designed to work exclusively with standalone Angular projects. Traditional NgModule-based projects are not supported.