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

Setting Up Your Kendo UI for Angular License Key

This article describes how to activate the Kendo UI for Angular components by installing a personal license key.

Since version 13.5.0 of Kendo UI for Angular, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section.

Kendo UI for Angular is a professionally developed library distributed under a commercial license. As of December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key.

To follow the way modern web applications are developed, Kendo UI for Angular serves its packages through NPM. While this makes using it in Angular projects seamless, NPM hosting does not provide a way for commercial library providers to manage trial and licensed users.

Our community is very important to us and we want to make sure that licensing does not get in your way. So let us know if you experience any issues.

You can send us feedback through the Contact Us form or by opening a support ticket.

The license key installation process involves the following steps:

  1. Download a license key.
  2. Install or update your license key file in your project.
  3. Register the license key by running a CLI command.

Downloading the License Key

To download a license key for Kendo UI for Angular, you must have either a developer license or a trial license. If you are new to Kendo UI for Angular, sign up for a free trial first and then follow the steps below.

  1. Go to the License Keys page in your Telerik account.

  2. On the Progress® Kendo UI® for Angular row, click the Download key link in the LICENSE KEY column.

Installing and Updating License Keys

In case the license is renewed, make sure you download the new license key and clear the cache stored by Angular.

  1. Copy the kendo-ui-license.txt license key file to the root folder of your application. This is the folder that contains the package.json file.

    • Alternatively, set up a new system environment variable called KENDO_UI_LICENSE and paste the license key as a value. This approach is recommended when you do not want to have the license key in the source code.

      The environment variable must be set on system or user level. Do not set the license key using Angular application environments.

  2. Install @progress/kendo-licensing as a project dependency by running:

sh
npm install --save @progress/kendo-licensing

or

sh
yarn add @progress/kendo-licensing
  1. Activate the license by running:
sh
npx kendo-ui-license activate

or

sh
yarn run kendo-ui-license activate

Adding the License Key to CI Services

The license key must be present at build time. The recommended approach is to use an environment variable.

Each platform has a different process for setting environment variables. Some popular examples are listed below.

GitHub Actions

  1. Create a new Repository Secret or an Organization Secret. Set the name of the secret to KENDO_UI_LICENSE and paste the contents of the license file as a value.

  2. After running npm install or yarn, add a build step to activate the license:

yaml
steps:
    # ... Install modules before activating the license.
    - name: Install NPM modules
      run: |
        npm install -g @angular/cli
        npm install

    - name: Activate Kendo UI License
      run: npx kendo-ui-license activate
      # Set a working directory if the application is not in the repository root folder:
      # working-directory: 'ClientApp'
      env:
        KENDO_UI_LICENSE: ${{ secrets.KENDO_UI_LICENSE }}

    # ... Run an application build after the activation of the license.
    - name: Build Application
      run: npm run build --configuration production

Azure Pipelines (YAML)

  1. Create a new User-defined Variable named KENDO_UI_LICENSE. Paste the contents of the license key file as a value.

  2. After running npm install or yarn, add a build step to activate the license.

    The following example provides the syntax for Windows build agents.

    yaml
    pool:
      vmImage: 'windows-latest'
    
    steps:
    
    # ... Install modules before activating the license.
    - script: call npm install
      displayName: 'Install NPM modules'
    
    - script: call npx kendo-ui-license activate
      displayName: 'Activate Kendo UI License'
      # Set a working directory if the application is not in the repository root folder:
      # workingDirectory: 'ClientApp'
      env:
        KENDO_UI_LICENSE: $(KENDO_UI_LICENSE)
    
    # ... Run an application build after the activation of the license.
    - script: call npm run build --configuration production
      displayName: 'Build Application'

    The following example provides the syntax for Linux build agents.

    yaml
    pool:
      vmImage: 'ubuntu-latest'
    
    steps:
    
    # ... Install modules before activating the license.
    - script: npm install
      displayName: 'Install NPM modules'
    
    - script: npx kendo-ui-license activate
      displayName: 'Activate Kendo UI License'
      # Set a working directory if the application is not in the repository root folder:
      # workingDirectory: 'ClientApp'
      env:
        KENDO_UI_LICENSE: $(KENDO_UI_LICENSE)
    
    # ... Run an application build after the activation of the license.
    - script: npm run build --configuration production
      displayName: 'Build Application'

Azure Pipelines (Classic)

  1. Create a new user-defined variable named KENDO_UI_LICENSE. Paste the contents of the license key file as a value.

  2. Before the NPM build task, add a new Bash task to the Agent job.

    Kendo UI for Angular - Activating Your License Key - Add a new Bash task to the Agent job in Azure

  3. Change the step to inline and use the following command:

    bash
    # Activate the license
    npx kendo-ui-license activate

    Kendo UI for Angular - Activating Your License Key - Activate Kendo License

Invalid License

An invalid license can be caused by any of the following:

If you use Kendo UI for Angular in a project with an expired or missing license, the UI components exhibit the following behavior:

  1. A watermark appears over a number of selected components:

    • A watermark appearing in the Light Theme mode.

    Kendo UI for Angular - Grid with a watermark - Light theme

    • A watermark appearing in the Dark Theme mode.

    Kendo UI for Angular - Grid with a watermark - Dark theme

  2. A banner appears on pages that use unlicensed Kendo UI for Angular components.

    Kendo UI for Angular - Invalid License Banner

    • Clicking the ? button of the banner takes you to the Kendo UI for Angular licensing documentation.
    • Clicking the x button of the banner closes it until the page is reloaded or a license is activated.
  3. A warning message similar to the following is logged in the browser's console

Kendo UI for Angular - Console Warning for a missing or invalid license

Frequently Asked Questions

This section lists the answers to the most frequently asked questions (FAQs) about working with the Kendo UI for Angular license key.

Will the product function with an expired license key?

Yes, the product will continue to function normally with an expired license key. However, the following will happen if you update or install a package version which is released after the expiration date of the license:

  • A watermark will appear over selected Kendo UI for Angular components.
  • A licensing banner will pop over a page that uses unlicensed Kendo UI for Angular components.
  • A warning message will appear in the browser console.

See the Invalid License section for more information.

Note that future updates of the library may restrict or disable some features when no valid license is present.

Will a watermark and license banner appear if I use a Kendo UI for Angular version that was released prior to v13.5.0?

If you have a valid license activated for your project, you won't get any invalid license attributes.

I updated the version of the Kendo UI for Angular packages in my project and the invalid license attributes appeared. What is the cause for this behavior?

If this happens, the possible reason is that the end date of the license activated in your application is before the release date of the newly installed Kendo UI for Angular packages. To fix this issue:

  1. Download a new license key.
  2. Activate the new license key in your project.

Can I use the same license key in multiple builds?

Yes, you can use the same license key in multiple pipelines, build and environments.

Does the license key expire?

Yes, the license key expires at the end of your support subscription:

  • For trial users, this is at the end of your 30-day trial.
  • For licensed developers, this is when your subscription expires.

You will need to obtain and install a new license key after starting a trial, renewing a license, or upgrading a license.

An expired license key is valid for all Kendo UI for Angular versions which are published before its expiration date.

I renewed my license key, but still seeing the invalid license attributes. What should I do?

Due to some optimization techniques of the framework, the invalid license attributes may still appear even after successful activation of the license. You need to clear the cache, stored by Angular, by running the following command.

bash
rm -rf .angular/cache

The same command needs to be executed if a valid license is activated successfully on already built Angular app.

Then follow the steps described in the Installing and Updating License Keys article.

For more information, please refer to the Angular Persistent disk cache article.

Do I need an Internet connection to activate the license?

No, the license activation and validation are performed entirely offline.

No network requests are made at any point of the project lifecycle.

Do I have to add the license key to source control?

No, you do not have to add the kendo-ui-license.txt license key file or its contents to source control.

Build servers have to use the KENDO_UI_LICENSE environment variable as previously described.

Do not store the license key in plaintext, for example, in a GitHub Actions Workflow definition.

Is it possible to activate the license without executing commands?

Yes, if present, the license will be activated automatically during package installation. This applies to both the license key files and the environment variable. A diagnostic message will be printed in the npm install log.

Using the kendo-ui-license activate command is optional, but recommended in builds as it will return an error if the activation fails.

What happens if both the environment variable and the license key file are present?

If both the KENDO_UI_LICENSE environment variable and the kendo-ui-license.txt file are present, then the environment variable will be used.

To enforce the use of the license key file, unset the environment variable.

My team has more than one licensed developer. Which key do we have to use?

To activate Kendo UI for Angular you can use any of the keys associated with your subscriptions.

Are earlier versions of Kendo UI for Angular affected?

No, versions released prior to December 2020 do not require a license key.