https://github.com/ngx-rock/vscode-angular-auto-import

Automatically suggests and inserts missing Angular component imports based on selectors used in templates.
https://github.com/ngx-rock/vscode-angular-auto-import

Last synced: 7 days ago
JSON representation

Automatically suggests and inserts missing Angular component imports based on selectors used in templates.

• Host: GitHub
• URL: https://github.com/ngx-rock/vscode-angular-auto-import
• Owner: ngx-rock
• License: mit
• Created: 2025-05-24T21:57:00.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-10-14T20:23:41.000Z (14 days ago)
• Last Synced: 2025-10-14T20:43:34.158Z (14 days ago)
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=baryshevrs.angular-auto-import
• Size: 3.01 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - vscode-angular-auto-import - Automatically suggests and inserts missing Angular component imports based on selectors used in templates. (Development Utilities / Developer Tools)
• awesome-angular - vscode-angular-auto-import - Automatically suggests and inserts missing Angular component imports based on selectors used in templates. (Development Utilities / Developer Tools)

README

          
# Angular Auto-Import for VS Code

[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/baryshevrs.angular-auto-import?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=baryshevrs.angular-auto-import)

[![Installs](https://img.shields.io/visual-studio-marketplace/i/baryshevrs.angular-auto-import?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=baryshevrs.angular-auto-import)

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

![Angular Auto-Import in action](https://raw.githubusercontent.com/ngx-rock/vscode-angular-auto-import/refs/heads/main/img/demo.gif) 

## 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](https://marketplace.visualstudio.com/items?itemName=baryshevrs.angular-auto-import)

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., ` 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.