Documentation

Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS)
3. Search for "Angular Architect"
4. Click Install

From VSIX File

If you have a .vsix file:

1. Open VS Code
2. Press Ctrl+Shift+P / Cmd+Shift+P
3. Type "Install from VSIX"
4. Select your .vsix file

Running Your First Scan

Angular Architect automatically activates when you open a workspace containing an angular.json file.

Start a Scan

1. Click the Angular Architect icon in the Activity Bar (left sidebar)
2. Click the Scan Project button
3. Wait for the analysis to complete (usually 10-30 seconds depending on project size)

Understanding the Dashboard

After a scan completes, you'll see the Dashboard with your project's health score and key metrics.

Health Score

The overall health score (0-100) is calculated based on multiple factors:

• Code Complexity: Average nesting depth across files
• Dead Code: Unused exports and unreferenced files
• Structural Issues: Circular dependencies, large files
• Angular Best Practices: Proper module organization

KPI Metrics

The KPI panel shows quick statistics about your project:

• Total Files: Number of TypeScript/JavaScript files
• Components: Angular components detected
• Services: Injectable services
• Modules: NgModules or standalone component imports
• Issues: Total problems detected

Architecture Tree

The Architecture Tree provides a hierarchical view of your Angular project structure, showing how modules, components, services, and other elements are organized.

Navigation

• Expand/Collapse: Click the arrow icons to expand or collapse nodes
• Jump to File: Click any item to open its source file in the editor
• Search: Use the search box to filter the tree by name

Icons Legend

Nesting Analysis (Code Complexity)

The Nesting Analysis feature identifies files with deep control flow nesting that can make code hard to read and maintain.

What is "Nesting Hell"?

Code with deep nesting of control structures (if, for, while, switch, try/catch) increases cognitive load and makes code harder to understand:

// ❌ Deep nesting (depth: 5) - Hard to read
if (condition1) {
  for (const item of items) {
    if (condition2) {
      try {
        if (condition3) {
          // Logic buried deep
        }
      } catch (e) { }
    }
  }
}

// ✅ Refactored - Early returns, extracted functions
if (!condition1) return;

for (const item of items) {
  processItem(item);
}

Understanding the Results

• Depth 1-3: Good - Easy to understand
• Depth 4-5: Warning - Consider refactoring
• Depth 6+: Critical - Refactoring recommended

Code Quality

The Code Quality analyzer checks for common issues and anti-patterns in your codebase:

• Large Files: Files exceeding recommended line counts
• Complex Functions: Functions with too many parameters or lines
• Magic Numbers: Hardcoded values that should be constants
• Console Statements: Leftover debugging statements
• TODO/FIXME Comments: Technical debt markers

Dependency Analysis

Track and analyze your project's npm dependencies:

Features

• Version Tracking: See current vs latest versions
• Update Indicators: Identify outdated packages
• Dependency Types: Distinguish between dependencies and devDependencies
• Size Impact: View package sizes and their impact

Security (Pro)

Pro users get deep security analysis including known CVE detection and vulnerability scanning.

Angular Specifics

Angular-specific analysis helps you follow best practices:

• Module Organization: Proper separation of concerns
• Standalone Components: Migration opportunities
• Lazy Loading: Route-based code splitting
• Change Detection: OnPush strategy recommendations
• Subscription Management: Potential memory leak detection

Dead Code Detection

Find and remove unused code to keep your codebase clean:

• Unused Exports: Functions, classes, or variables exported but never imported
• Unreferenced Files: Files not imported anywhere in the project
• Unused Variables: Declared but never used variables
• Empty Files: Files with no meaningful content

Extension Settings

Configure Angular Architect via VS Code Settings (Ctrl+, / Cmd+,):

Configuring Thresholds

You can customize warning thresholds to match your team's standards. Add to your .vscode/settings.json:

{
  "angularArchitect.nesting.threshold": 4,
  "angularArchitect.nesting.includeArrowFunctions": true,
  "angularArchitect.nesting.maxFileSizeMB": 2
}

Exclude Patterns

Exclude files from analysis using glob patterns:

{
  "angularArchitect.nesting.excludePatterns": [
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/node_modules/**",
    "**/dist/**",
    "**/coverage/**",
    "**/e2e/**",
    "**/*.mock.ts"
  ]
}

Export Reports PRO

Export your analysis results for documentation or sharing with your team:

Export Formats

• HTML: Beautiful, styled reports perfect for presentations
• Markdown: Great for documentation and README files
• JSON: Raw data for integration with other tools

How to Export

1. Complete a project scan
2. Click the Export button in the toolbar
3. Select your desired format
4. Choose a save location

Historical Trends PRO

Track how your project's health changes over time:

• View health score progression
• Compare issue counts between scans
• Identify improvement or regression trends
• Set improvement goals and track progress

License Activation

After purchasing Pro, activate your license:

1. Open VS Code with Angular Architect installed
2. Press Ctrl+Shift+P / Cmd+Shift+P
3. Type "Angular Architect: Activate Pro"
4. Enter the license key from your purchase email
5. Pro features will unlock immediately

Need Help?