New to Kendo UI for AngularStart a free 30-day trial

Migrating Your Code

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.

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 the Kendo CLI globally.

    bash
    npm i -g @progress/kendo-cli
  2. In the root of your project, run:

    bash
    npx @progress/kendo-cli migrate

    If not already installed, you will be prompted to install the Kendo CLI. Next, this command checks for available Kendo UI updates (including any peer dependencies), prompts you to install the updates, and then applies 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.
    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.

Best Practices

For a more manageable migration process, consider the following recommended practices:

  • Migrate between consecutive major versions. For example, migrate from v18.0.0 to v19.0.0. This lets you review and adjust your code version by version, avoiding possible conflicts between breaking changes.
  • Migrate one package at a time. This provides finer control over the migration process.

CLI Quick Guide

The following list describes the most common migration scenarios.

  • You can run any of the listed commands with or without a package specified.
  • If not already installed, you will be prompted to install the Kendo CLI when running npx @progress/kendo-cli migrate for the first time.
  • Once installed, you can also run commands with the kendo handle instead of npx @progress/kendo-cli. For example: kendo migrate.
bash
# Install the Kendo CLI globally.
npm i -g @progress/kendo-cli
# Run a guided migration. You will be prompted every step of the way.
npx @progress/kendo-cli migrate
# Migrate a specific package.
npx @progress/kendo-cli migrate @progress/kendo-angular-grid
# Migrate between specific versions.
npx @progress/kendo-cli migrate --from 18 --to 19
# Run a quick migration without any prompts.
npx @progress/kendo-cli migrate --force
# Only install the available updates. Do not run any codemods.
# Useful when you want to manually migrate your code.
npx @progress/kendo-cli migrate --no-codemods
# Only run the available codemods. Do not install any packages.
# Useful when you already have the packages installed.
npx @progress/kendo-cli migrate --no-install 

CLI Arguments

If you want more control over the migration, you can use any of the following arguments when running npx @progress/kendo-cli migrate.

ArgumentDescriptionSample Use
<pkg>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.npx @progress/kendo-cli migrate @progress/kendo-angular-grid
--helpPrints the help for the command.npx @progress/kendo-cli migrate --help
--versionPrints the version of the Kendo CLI.npx @progress/kendo-cli --version
--verboseSets the verbosity level of the command output on a level from 0 (silent) to 5 (most verbose). By default: 1.npx @progress/kendo-cli migrate --verbose=3
--quietSilences the output as much as possible. Shorthand for --verbose=0.npx @progress/kendo-cli migrate --quiet
--forceRuns in force mode and does not ask for any confirmations.npx @progress/kendo-cli migrate --force
--toSpecifies the package version to migrate to. If not set, migrates to the latest available version of the respective package(s).npx @progress/kendo-cli migrate @progress/kendo-angular-grid --codemods --to=19
--fromSpecifies the package version to migrate from. If not set, uses the current version.npx @progress/kendo-cli migrate @progress/kendo-angular-grid --codemods --from=18
--no-installSkips the installation part of the migration. Use this option if you have already updated your packages and want to only run the available codemods.npx @progress/kendo-cli migrate --no-install
--no-codemodsSkips the codemods step of the migration. Use this option to only install the available updates.npx @progress/kendo-cli migrate --no-codemods
--no-peer-depsSkips the installation of any peer dependencies for the updated packages. By default, the migrate command always installs the available peer dependencies.npx @progress/kendo-cli migrate --no-peer-deps
--no-optionalSkips the optional codemods, if any. Use this option to run only the required transformations.npx @progress/kendo-cli migrate --no-optional

Available Codemods

Kendo UI for Angular provides the following codemods:

VersionsComponent
v18.0.0 to v19.0.0