# Kendo Angular Assisted Migration Tooling

Starting with Kendo UI for Angular v19.0.0 and Kendo CLI v1.9.0, you can speed up the migration between major Kendo UI for Angular versions with the Kendo CLI. The Kendo CLI is a powerful code transformation tool that automates updates and helps migrate your Kendo UI for Angular components through codemods.

## AI-Assisted Migration

To speed up the migration process and reduce manual effort, the [Kendo UI for Angular MCP server](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator) includes the [Upgrade Assistant](https://www.telerik.com/kendo-angular-ui/components/ai-migration)—a dedicated AI assistant that runs codemods automatically and uses AI reasoning to resolve remaining compilation errors in one continuous flow.

> To let AI handle the migration for you, skip the steps below and go straight to the [AI-Assisted Migration](https://www.telerik.com/kendo-angular-ui/components/ai-migration).

## Overview

During the migration process, the codemods automatically transform the Kendo UI for Angular components in your project code by updating:

* Component HTML templates
* Standalone HTML files
* Component TypeScript logic

The codemods support three transformation patterns: updating property names, modifying property values, handling property deprecation and removal.

To get started with the migration process, follow these steps to set up the Kendo CLI and run the available codemods.

1. Install Kendo CLI globally and run a guided migration using one of the following methods:

   * Install Kendo CLI through NPM and run the migration manually:

     ```bash
     npm i -g @progress/kendo-cli
     ```

     ```bash
     kendo migrate
     ```

   * Install Kendo CLI and automatically run the guided migration using NPX:
     ```bash
     npx @progress/kendo-cli migrate
     ```

> Once Kendo CLI is installed, you can run commands with the `kendo` handle instead of `npx @progress/kendo-cli`.
>
> For example: `kendo migrate`.

2. Next, the migration command will check for available Kendo UI updates (including any peer dependencies that are already present in the project), prompt you to install the updates, and then apply any available codemods on top.
3. Confirm that you want to install the available updates.
4. Confirm that you want to apply the available transformations.
5. Review and accept the suggested transformations.<br/>The Kendo CLI begins to apply the available codemods version by version, starting with the transformations for the earliest version.
6. Finally, do a test run of your project to verify that everything works as expected.

> The migration tool updates the Kendo UI for Angular packages and their peer dependencies that are already present in the project. It does not automatically install any missing peer dependencies.

> tip If your project lacks required peer dependencies after migration, you can install them using `ng add @progress/kendo-angular-<package-name>` or by manually running `npm install` for the missing dependencies.

## Best Practices

For most projects, running all available codemods for the affected Kendo UI for Angular packages at once is an effective and practical approach.

Depending on your project size, complexity, or preferences, you may also consider the following practices:

* Migrate between consecutive major versions—For example, migrate from v22.0.0 to v23.0.0. This lets you review and adjust your code version by version, which can help avoid possible conflicts between breaking changes in larger or more complex projects.
* Migrate one package at a time—This provides finer control over the migration process and allows you to focus on individual updates, making it easier to monitor changes and resolve any issues as they arise.

## CLI Quick Guide

The following list describes the most common migration scenarios, providing useful commands and explanations to help you efficiently update your Kendo UI for Angular packages using the Kendo CLI:

* Install the Kendo CLI globally.
  ```bash
  npm i -g @progress/kendo-cli
  ```

* Run a guided migration. You will be prompted every step of the way.
  ```bash
  kendo migrate
  ```

* Migrate a specific package.
  ```bash
  kendo migrate @progress/kendo-angular-dropdowns
  ```

* Migrate a specific package between particular versions.

  ```bash
  kendo migrate @progress/kendo-angular-dropdowns --from=22 --to=23
  ```

  > To use the `--from` and `--to` version flags, you must specify a package in the command. Using the version flags without a package will update all detected Kendo packages to their respective latest versions.

* Run a quick migration without any prompts.
  ```bash
  kendo migrate --force
  ```

* Only install the available updates. Do not run any codemods. Useful when you want to manually migrate your code.
  ```bash
  kendo migrate --no-codemods
  ```

* Only run the available codemods. Do not install any packages. Useful when you already have the packages installed.
  ```bash
  kendo migrate --no-install
  ```

## CLI Arguments

If you want more control over the migration, you can use any of the following arguments when running `kendo migrate`.

<table>
    <thead>
        <tr>
            <th width="15%">Argument</th>
            <th width="50%">Description</th>
            <th width="35%">Sample Use</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>&lt;pkg&gt;</code></td>
            <td>Specifies one or more packages for which to execute the assisted migration (with any additional arguments). If not set, runs for all available Kendo packages.</td>
            <td><code>kendo migrate @progress/kendo-angular-dropdowns</code></td>
        </tr>
        <tr>
            <td><code>--help</code></td>
            <td>Prints the help for the command.</td>
            <td><code>kendo migrate --help</code></td>
        </tr>
        <tr>
            <td><code>--version</code></td>
            <td>Prints the version of the Kendo CLI.</td>
            <td><code>kendo --version</code></td>
        </tr>
        <tr>
            <td><code>--verbose</code></td>
            <td>Sets the verbosity level of the command output on a level from 0 (silent) to 5 (most verbose). By default: 1.</td>
            <td><code>kendo migrate --verbose=3</code></td>
        </tr>
        <tr>
            <td><code>--quiet</code></td>
            <td>Silences the output as much as possible. Shorthand for <code>--verbose=0</code>.</td>
            <td><code>kendo migrate --quiet</code></td>
        </tr>
        <tr>
            <td><code>--force</code></td>
            <td>Runs in force mode and does not ask for any confirmations.</td>
            <td><code>kendo migrate --force</code></td>
        </tr>
        <tr>
            <td><code>--to</code></td>
            <td>Specifies the package version to migrate to. If not set, migrates to the latest available version of the respective package(s). Requires a package to be specified.</td>
            <td><code>kendo migrate @progress/kendo-angular-dropdowns --to=23</code></td>
        </tr>
        <tr>
            <td><code>--from</code></td>
            <td>Specifies the package version to migrate from. If not set, uses the current version. Requires a package to be specified.</td>
            <td><code>kendo migrate @progress/kendo-angular-dropdowns --from=22</code></td>
        </tr>
        <tr>
            <td><code>--no-install</code></td>
            <td>Skips the installation part of the migration. Use this option if you have already updated your packages and want to <strong>only</strong> run the available codemods.</td>
            <td><code>kendo migrate @progress/kendo-angular-dropdowns --no-install</code></td>
        </tr>
        <tr>
            <td><code>--no-codemods</code></td>
            <td>Skips the codemods step of the migration. Use this option to <strong>only</strong> install the available updates.</td>
            <td><code>kendo migrate --no-codemods</code></td>
        </tr>
        <tr>
            <td><code>--no-peer-deps</code></td>
            <td>Skips the update of any peer dependencies for the specified package. By default, the <code>migrate</code> command always updates the available peer dependencies in the project.</td>
            <td><code>kendo migrate @progress/kendo-angular-dropdowns --no-peer-deps</code></td>
        </tr>
        <tr>
            <td><code>--no-optional</code></td>
            <td>Skips the optional codemods, if any. Use this option to run <strong>only</strong> the required transformations.</td>
            <td><code>kendo migrate --no-optional</code></td>
        </tr>
        <tr>
            <td><code>--ignore-pattern</code></td>
            <td>Specifies a glob pattern to ignore specific files or directories during the migration. Use this option to exclude files that you do not want to be modified.</td>
            <td><code>kendo migrate --ignore-pattern="dist/**"</code></td>
        </tr>
    </tbody>
</table>

## Available Codemods

Codemods automatically update all Kendo UI for Angular related code in your project during migrations between major versions. They are designed to handle all breaking changes introduced in each major release.

The table below lists the components that introduce breaking changes for the specified migration path—these are the components for which the codemods will apply the necessary updates in your codebase:

| Migration Path          | Affected Components with Breaking Changes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| From v18.0.0 to v19.0.0 | <ul><li>[DropDowns](https://www.telerik.com/kendo-angular-ui/components/available-codemods#dropdowns)</li><li>[Date Inputs](https://www.telerik.com/kendo-angular-ui/components/available-codemods#date-inputs)</li><li>[ToolBar](https://www.telerik.com/kendo-angular-ui/components/available-codemods#toolbar)</li><li>[Layout](https://www.telerik.com/kendo-angular-ui/components/available-codemods#layout)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| From v19.0.0 to v20.0.0 | <ul><li>[Grid](https://www.telerik.com/kendo-angular-ui/components/available-codemods#grid)</li><li>[Conversational UI](https://www.telerik.com/kendo-angular-ui/components/available-codemods#conversational-ui)</li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| From v20.0.0 to v21.0.0 | <ul><li>[Grid](https://www.telerik.com/kendo-angular-ui/components/available-codemods#grid-1)</li><li>[Conversational UI](https://www.telerik.com/kendo-angular-ui/components/available-codemods#conversational-ui-1)</li><li>[ListBox](https://www.telerik.com/kendo-angular-ui/components/available-codemods#listbox)</li>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| From v22.0.0 to v23.0.0 | <ul><li>[Conversational UI](https://www.telerik.com/kendo-angular-ui/components/available-codemods#conversational-ui-2)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| From v23.0.0 to v24.0.0 | <ul><li>[Buttons](https://www.telerik.com/kendo-angular-ui/components/available-codemods#buttons)</li><li>[Icons](https://www.telerik.com/kendo-angular-ui/components/available-codemods#icons)</li><li>[Indicators](https://www.telerik.com/kendo-angular-ui/components/available-codemods#indicators)</li><li>[Layout](https://www.telerik.com/kendo-angular-ui/components/available-codemods#layout-1)</li><li>[Navigation](https://www.telerik.com/kendo-angular-ui/components/available-codemods#navigation)</li><li>[Dialog](https://www.telerik.com/kendo-angular-ui/components/available-codemods#dialog)</li><li>[Conversational UI](https://www.telerik.com/kendo-angular-ui/components/available-codemods#conversational-ui-3)</li><li>[Spreadsheet](https://www.telerik.com/kendo-angular-ui/components/available-codemods#spreadsheet)</li></ul> |
| From v24.0.0 to v25.0.0 | <ul><li>[DropDowns](https://www.telerik.com/kendo-angular-ui/components/available-codemods#dropdowns-1)</li><li>[Scheduler](https://www.telerik.com/kendo-angular-ui/components/available-codemods#scheduler)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

## Suggested Links

* [Upgrade Assistant](https://www.telerik.com/kendo-angular-ui/components/ai-migration)
* [Kendo UI for Angular AI Tools Overview](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator)
* [Keeping Up to Date](https://www.telerik.com/kendo-angular-ui/components/up-to-date)
* [Changelogs](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui)
* [Rendering Changes](https://www.telerik.com/kendo-angular-ui/components/changelogs/rendering-changes)
