Angular Architect
Angular Architect is a comprehensive architectural analysis and visualization tool for Angular projects. It helps engineering teams build maintainable, scalable, and high-quality software by making project architecture visible, measurable, and actionable.
Demo
Key Features
- Project Overview: High-level metrics including module count, component count, and health scores.
- Architecture Tree: Interactive hierarchical visualization of your project's structure.
- Issues Analysis: Deep scan for architectural smells and code quality issues (Automated fixes coming soon).
- Dependencies Management: Complete dependency graph analysis with vulnerability detection.
- Nesting Hell Analysis: Identify cognitive complexity hotspots with deep control flow analysis.
- VS Code Integration: Native feel with full theme support and direct file navigation.
About Architect Labs
Architect Labs is a developer-focused tooling studio dedicated to helping engineering teams build maintainable, scalable, and high-quality software. We believe that great architecture shouldn't be a mystery—it should be visible, measurable, and actionable.
Visit us at architect-labs.com
Requirements
- VS Code 1.107.0 or higher
- Angular project (v10+)
- Limited support for Nx (full support coming soon)
- Node.js for dependency analysis
Usage
- Open an Angular project in VS Code.
- Click the Angular Architect icon in the Activity Bar.
- Run a Scan Project to analyze your architecture.
- Explore the different views: Overview, Architecture, Issues, Dependencies, and Nesting Hell.
Documentation
Full documentation is available at:
https://www.architect-labs.com/docs
Support & Feedback
- Parallel processing: Files are analyzed in batches for speed
- Smart filtering: Automatically skips test files, node_modules, and build artifacts
- Size limits: Large files are skipped to prevent memory issues
- Configurable timeouts: Analysis and parsing timeouts prevent hanging on complex files
Timeout Configuration
You can configure timeout settings in your VS Code settings:
angularArchitect.nesting.analysisTimeoutMinutes: Maximum time for the entire analysis to complete (default: 5 minutes, range: 1-60)angularArchitect.nesting.fileParseTimeoutSeconds: Maximum time to parse a single file (default: 5 seconds, range: 1-30)
These settings help prevent the extension from hanging on very large or complex projects.
Expected analysis times:
- Small projects (< 100 files): < 5 seconds
- Medium projects (100-1000 files): 10-30 seconds
- Large projects (> 1000 files): 30-120 seconds
Development
This extension is built with:
- TypeScript for the extension host
- React with Vite for the webview UI
- Tailwind CSS for styling
- FontAwesome for icons
- tree-sitter for AST parsing
Release Notes
See CHANGELOG.md for detailed release notes.
License
Proprietary. © 2026 Architect Labs. All rights reserved.
