ngxsmk-migrate

AI-Powered Angular Migration and Modernization Toolkit.

ngxsmk-migrate is the leading AI-powered toolkit designed to help developers automatically upgrade, refactor, and modernize Angular applications. Whether you're moving to Standalone Components, adopting Angular Signals, or upgrading from legacy versions, ngxsmk-migrate automates the heavy lifting.

The Problem: Legacy Angular Technical Debt

Upgrading large Angular enterprise applications is often slow, manual, and error-prone. Developers face:

• Deprecated APIs: Keeping up with breaking changes in every Angular release.
• Legacy Architecture: Transitioning from NgModules to Standalone patterns.
• Reactive Bottlenecks: Migrating complex RxJS patterns to modern Angular Signals.
• Manual Refactoring: Spending weeks rewriting templates and components.

The Solution: AI-Powered Angular Modernization

ngxsmk-migrate uses advanced AI (Gemini 1.5) and AST transformations to provide one-click Angular migration. It understands your project's unique architecture and suggests optimized, modern replacements.

Core AI Features

• Angular Signals Migrator: Automatically convert BehaviorSubjects and computed state into signal(), computed(), and effect().
• Standalone Migration Engine: Seamlessly transition from NgModules to a Standalone-first architecture.
• Angular Template Modernizer: Upgrade legacy *ngIf and *ngFor syntax to the latest @if and @for control flow.
• AI-Powered Refactor: Intelligently split large components and simplify complex RxJS logic.
• Upgrade Assistant: Get detailed reports on breaking changes and a step-by-step upgrade plan.

Quick Start

Installation

npm install -g ngxsmk-migrate

Configuration

To enable AI-powered refactoring and explanations, set the API key for your preferred provider:

Gemini (Default)

• Env Variable: GOOGLE_API_KEY
• CLI: ngxsmk-migrate --provider gemini (default)

ChatGPT (OpenAI)

• Env Variable: OPENAI_API_KEY
• CLI: ngxsmk-migrate --provider openai --model gpt-4o

Claude (Anthropic)

• Env Variable: ANTHROPIC_API_KEY
• CLI: ngxsmk-migrate --provider anthropic --model claude-3-5-sonnet-20240620

Windows (PowerShell):

$env:OPENAI_API_KEY="your_api_key_here"

macOS / Linux:

export OPENAI_API_KEY="your_api_key_here"

Advanced: Switching Models

By default, the toolkit uses the most optimal model for each provider. You can override it using the -m or --model flag.

Usage

1. Analyze your project:

   ngxsmk-migrate analyze .

2. Automatically fix and modernize:

   ngxsmk-migrate fix .

3. Full Scale Migration:

   ngxsmk-migrate migrate .

Migration Examples

Before (Legacy Component)

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="user$ | async as user">
      {{ user.name }}
    </div>
  `
})
export class UserComponent {
  user$ = this.userService.user$;
}

After (AI Modernized)

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    @if (user()) {
      {{ user().name }}
    }
  `
})
export class UserComponent {
  user = signal(this.userService.user());
}

Roadmap

• [x] CLI Infrastructure
• [x] AI Core Integration
• [ ] Automated Signal Migration (Alpha)
• [ ] Standalone Component Converter
• [ ] Performance Benchmark Reports

Contributing

We welcome contributions! Please see our Contributing Guide to get started.

Built with ❤️ by Sachin Dilshan and the ngxsmk team. Modernize your Angular apps today with the power of AI.