Simple Angular LSP
A lightweight, text-based Language Server Protocol implementation for Angular. This extension provides lightning-fast navigation by bypassing the heavy overhead of the official Angular Language Service.
Features
- Fast Component Navigation:
Cmd/Ctrl + Click on any custom component selector (e.g., <dh-test>) in HTML or TypeScript to jump directly to the component definition.
- Template Linking: Instant "Go to Definition" for
templateUrl paths.
- Style Linking: Supports navigation for
styleUrl and styleUrls (CSS/SCSS).
- Monorepo Ready: Optimized for speed in Nx-style monorepos and large enterprise codebases.
- Zero-Config Cross-Platform: Works out of the box on Windows, Intel Macs, and Apple Silicon (M1/M2/M3) without installing external dependencies.
Requirements
- No external dependencies required! The extension uses pure Node.js and the fast-glob library for blazing-fast file searching, ensuring maximum compatibility with enterprise security tools.
How it Works
Unlike the official Angular LSP which parses a full TypeScript Type Graph (often leading to high memory usage and lag), this extension uses an intelligent component index. By building an in-memory map of all component selectors at startup, it provides instant navigation (<1ms) to component definitions, even in projects with thousands of files. The index automatically updates when files change, ensuring accuracy without sacrificing speed.
Automatic Index Updates
The extension watches for file changes and automatically reindexes when you save files:
Example: When you rename a component selector from "dh-top-navigation" to "dh-top-nav" and save the file:
- The file watcher detects the change
- The old selector
"dh-top-navigation" is removed from the index
- The new selector
"dh-top-nav" is added to the index
- You'll see in the output:
[Index] Updated <filepath> (index size: X)
Note: Changes are indexed automatically on file save. If you need to force a full reindex, reload the VS Code window (Ctrl+R / Cmd+R).
Known Issues
- Does not support navigation for dynamically generated selectors: The extension only matches static string literals in selector definitions. Dynamic selectors are not supported:
- ✅ Works:
selector: 'my-component', selector: "my-component", or selector: `my-component`
- ❌ Does NOT work:
selector: 'app-' + componentName (string concatenation)
- ❌ Does NOT work:
selector: `${prefix}-component` (template literals with variables)
- ❌ Does NOT work:
selector: COMPONENT_SELECTOR (variable references)
- ❌ Does NOT work:
selector: getSelector() (function calls)
- Requires exact string matching for selectors.
Release Notes
1.0.8
- Fixed Autocompletion Support: Implemented missing completion handler - fixes "Unhandled method textDocument/completion" error
- Added component selector suggestions when typing
<component-name in HTML templates
- Added
@Input() property binding suggestions when editing component tags
- Enhanced Method Detection: Property navigation now supports TypeScript methods, not just properties
Ctrl+Click on method calls like onDropdownToggle() navigates to the method declaration
- Supports async methods, generic methods
method<T>(), and getter/setter methods
- Observable Support: Property names with
$ suffix (e.g., isUnauthenticated$) now extract correctly
- Also supports properties with
_ prefix (e.g., _privateProperty)
- Improved @Input/@Output Detection: Better pattern matching for decorated properties
- Handles decorators on same line or separate line from property declaration
- Supports both properties and methods with
@Output() decorators
1.0.7
- HTML Template Property Navigation: Added "Go to Definition" for properties used in HTML templates
Ctrl+Click on properties like isMinimized navigates to the property declaration in the component's TypeScript file
Ctrl+Click on Angular input bindings like [minimized] navigates to the @Input() property in the referenced component
- Multi-line Component Tag Support: Improved component selector extraction to search backwards up to 20 lines to find opening tags
- Enhanced Property Detection: Added support for TypeScript non-null assertion operator (
!) in property declarations (e.g., minimized!: boolean)
- Language Configuration Update: Added
wordPattern to enable navigation on bracket-enclosed properties ([property])
1.0.6
- Progress Indicators: Added loading spinner in status bar during indexing with progress updates (Finding files → Processing → Building index)
- Status Bar Item: Shows "✓ Angular LSP: Active" in status bar when working in Angular projects (auto-detects via angular.json or @angular/core dependency)
- Click to View Output: Status bar item is clickable to show LSP output channel for debugging
- Duplicate Selector Support: Now handles multiple components with the same selector correctly (previously only kept last occurrence)
- Better Error Handling: Progress indicator wrapped in try-catch to gracefully handle cases where progress API is unavailable
- Fixed Line Length Limits: Removed hardcoded 1000-character line limits in favor of proper LSP document methods (fixes issues with minified code)
- UX Improvement: Removed auto-opening of output channel on startup (only shows on user action or errors)
1.0.5
- 🔥 Major Performance Upgrade: Replaced ripgrep with indexed component lookup for instant navigation (<1ms vs 4.7s per click)
- Component Index: Built once at startup and automatically updated via file watching
- Security-Friendly: Removed external executables (ripgrep) in favor of pure Node.js solution using fast-glob - no more blocked binaries
- TypeScript Import Navigation: Added "Go to Definition" support for imported classes/services (e.g., right-click on
WorkspaceService in constructor)
- Path Alias Resolution: Full support for TypeScript path mappings (e.g.,
@bsm/bsm-common) from tsconfig.json
- Windows Path Fixes: Improved file path handling for templateUrl/styleUrl navigation on Windows
- Cross-Platform: Works reliably on all platforms without external dependencies
1.0.2
- Static Bundling: Switched to
esbuild for production builds. All dependencies are now baked into the extension, resolving "Module not found" errors on Windows.
- Intelligent Binary Selection: Improved CPU architecture detection to automatically switch between
rg (ARM64) and rg-x86 (Intel) on macOS.
- Performance Optimization: Reduced extension startup time by minifying the client and server bundles.
- Reliability: Removed redundant file tracking to ensure smaller, cleaner
.vsix packages.
1.0.1
- Engine Upgrade: Migrated from system
grep to bundled Ripgrep (rg) for massive performance gains.
- Cross-Platform Support: Added specialized binary detection for Windows (.exe), Intel Macs (x86_64), and Apple Silicon (ARM64).
- Permission Handling: Integrated automatic permission fixes (
chmod) for macOS execution of bundled binaries.
- Enhanced Regex: Improved selector matching to handle various spacing and quote styles (
', ", or `).
- Bug Fixes: Resolved "Bad CPU type" errors on Apple Silicon and fixed pathing issues on Windows.
1.0.0
- Initial release with support for Selector, Template, and Style navigation using system-level
grep.
| |