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.

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.
• 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 (v14+)
• Node.js for dependency analysis

Usage

1. Open an Angular project in VS Code.
2. Click the Angular Architect icon in the Activity Bar.
3. Run a Scan Project to analyze your architecture.
4. Explore the different views: Overview, Architecture, Issues, Dependencies, and Nesting Hell.

Support & Feedback

• Documentation: architect-labs.com/docs
• Issue Tracker: GitHub Issues
• Email: support@architect-labs.com
• X (Twitter): @architect_labs

License

Proprietary. © 2025 Architect Labs. All rights reserved.

Nesting Hell Analysis

The Nesting Hell analyzer identifies files with deeply nested control flow structures that increase cognitive complexity. Unlike traditional metrics that count all AST nodes, this analyzer focuses specifically on control flow structures:

• if statements
• for, while, and do-while loops
• switch statements
• catch clauses
• Arrow functions (optional, configurable)

How It Works

The analyzer:

1. Scans all TypeScript/JavaScript files in your project
2. Parses each file using tree-sitter for accurate AST analysis
3. Calculates "cognitive depth" by counting only control flow nesting
4. Reports the maximum depth and exact line number where it occurs
5. Highlights files exceeding your configured threshold

Viewing Results

Navigate to the "Nesting Hell" tab in the Angular Architect sidebar to see:

• Top Offenders: The 10 files with the highest cognitive depth
• File Path: Relative path from project root
• Max Depth: Maximum nesting level found in the file
• Line Number: Where the maximum depth occurs (click to navigate)

Click any file in the list to jump directly to the problematic code location.

Configuration

Customize the nesting analyzer through VS Code settings (File > Preferences > Settings or Ctrl+,). All settings are under the angularArchitect.nesting.* namespace.

Details:

• threshold: Max cognitive depth before highlighting as violation.
• includeArrowFunctions: Include arrow functions/closures in depth calculation.
• excludePatterns: Glob patterns for files to exclude from analysis.
• maxFileSizeMB: Maximum file size (MB) to analyze.

Example Usage

{
  "angularArchitect.nesting.threshold": 5,
  "angularArchitect.nesting.includeArrowFunctions": true,
  "angularArchitect.nesting.excludePatterns": ["**/*.spec.ts", "**/node_modules/**"],
  "angularArchitect.nesting.maxFileSizeMB": 2
}

Example: Interpreting Results

File: src/app/services/data-processor.service.ts
Max Depth: 7
Line: 145

This indicates that data-processor.service.ts has a control flow structure nested 7 levels deep starting at line 145. This might look like:

if (condition1) {
  // Depth 1
  for (const item of items) {
    // Depth 2
    if (item.isValid) {
      // Depth 3
      while (processing) {
        // Depth 4
        if (hasMore) {
          // Depth 5
          try {
            // code
          } catch (error) {
            // Depth 6
            if (critical) {
              // Depth 7
              // handle error
            }
          }
        }
      }
    }
  }
}

Best Practices

1. Start with defaults: The default threshold of 5 is based on cognitive complexity research
2. Focus on top offenders: Refactor the worst files first for maximum impact
3. Use with code reviews: Check nesting depth before merging complex features
4. Exclude test files: Test files often have acceptable higher nesting for setup/teardown
5. Consider arrow functions: Enable includeArrowFunctions if your team uses functional patterns heavily

Performance

The analyzer is optimized for large projects:

• 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
• Timeout protection: Parsing timeouts prevent hanging on complex files

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 the CHANGELOG for detailed release notes.