Angular Migration Assistant

⚠️ Disclaimer ⚠️

This is NOT an official Angular extension. This extension is a community-developed tool and is not affiliated with, endorsed by, or connected to Angular, Google, or their official teams. A Visual Studio Code extension that helps with Angular migrations using the official Angular migration tools.

Features

• Migration Explorer: View and manage all available Angular migrations in a dedicated sidebar
• One-Click Migrations: Run migrations directly from the VS Code interface
• Migration Status: Track the status of each migration (pending, running, completed, failed)
• Progress Tracking: Visual feedback during migration execution
• Error Handling: Clear error messages and status updates

Supported Migrations

The extension supports the following Angular migrations:

1. Standalone Components Migration

   • Converts components to standalone components
   • Updates module imports and declarations

2. Control Flow Migration

   • Migrates to the new control flow syntax
   • Updates templates with modern Angular syntax

3. Inject Function Migration

   • Updates dependency injection to use the inject function
   • Modernizes service and component DI

4. Route Lazy Loading Migration

   • Updates route configurations for lazy loading
   • Modernizes route definitions

5. Signal Inputs Migration

   • Converts inputs to signal-based inputs
   • Updates component input handling

6. Outputs Migration

   • Updates output handling
   • Modernizes event emitters

7. Signal Queries Migration

   • Converts queries to signal-based queries
   • Updates view child and content child handling

8. Cleanup Unused Imports

   • Removes unused imports
   • Optimizes bundle size

9. Self-closing Tags Migration

   • Updates template syntax to use self-closing tags
   • Modernizes HTML templates

Requirements

• Visual Studio Code 1.85.0 or higher
• Angular CLI 17.0.0 or higher
• Node.js 18.0.0 or higher

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X)
3. Search for "Angular Migration Assistant"
4. Click Install

Usage

1. Open an Angular project in VS Code
2. Click the Angular Migrations icon in the activity bar
3. Select a migration from the list
4. Click the play button or use the command palette to run the migration

Commands

The extension provides the following commands:

• Angular Migration Assistant: Start Migration - Opens the migration selection dialog
• Angular Migration Assistant: Migrate to Standalone Components
• Angular Migration Assistant: Migrate to New Control Flow
• Angular Migration Assistant: Migrate to Inject Function
• Angular Migration Assistant: Migrate Route Lazy Loading
• Angular Migration Assistant: Migrate to Signal Inputs
• Angular Migration Assistant: Migrate Outputs
• Angular Migration Assistant: Migrate to Signal Queries
• Angular Migration Assistant: Cleanup Unused Imports
• Angular Migration Assistant: Migrate to Self-closing Tags

Configuration

The extension can be configured through VS Code settings:

• angularMigrationAssistant.autoMigrate: Enable/disable automatic migration execution
• angularMigrationAssistant.migrationPath: Custom path to Angular project

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This extension is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Angular Team for the migration tools
• VS Code Team for the extension API
• All contributors and users of this extension