In This Topic ▼

Add References and Set a License - Angular

This tutorial shows how to set a LEADTOOLS runtime license using Angular. Before any functionality from the SDK can be leveraged, a valid runtime license will have to be set. For instructions on how to obtain a runtime license refer to Obtaining a License.

Overview
Summary	This tutorial demonstrates how to set a LEADTOOLS runtime license using Angular and JavaScript.
Completion Time	15 minutes
Visual Studio Project	Download tutorial project (1 MB)
Platform	Angular Web Application
IDE	Visual Studio 2019, 2022, Visual Studio Code - Client
Development License	Download LEADTOOLS
Try it in another language	C#: .NET 6+ (Console), .NET 6+ (WinForms), WPF, Xamarin, MAUI Swift: macOS Console, macOS App, iOS C API: C DLL (Windows) Java: Java, Android, Flutter Android HTML5: HTML5 Angular, HTML5 JavaScript, HTML5 TypeScript, HTML5 React JS, HTML5 Vue.JS, HTML5 Node.JS Python: Python

Required Knowledge

Ensure that you have Node.js installed on your machine, as this tutorial and project makes use of Node.js. Below is the Node.js download link:

https://nodejs.org/en/download/package-manager

Note: If you download the sample project above, the required dependencies need to be installed. To do so, open a terminal window and cd into the project folder. Run the following code to install the node modules: npm install

Create the Project

First, install Angular CLI by opening a terminal window and running the command below:

npm install -g @angular/cli

Create a new workspace directory for your application. Next, cd into the workspace directory and run the below command to initialize your application:

ng new Add-References-and-Set-a-License

Note: The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing either the Enter or Return key. The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. The CLI creates a new workspace and a simple Welcome app, ready to run.

Add the License Files

Navigate to the assets folder inside the src directory. Create a new folder and name the folder LEADTOOLS. Place your Leadtools.lic.txt and Leadtools.lic.key.txt files into this newly created folder.

Add LEADTOOLS Dependencies

Navigate back to the assets folder inside the src directory. Copy and paste the below js and ts files to the assets folder.

The LEADTOOLS js files are located here: <INSTALL_DIR>\LEADTOOLS23\Bin\JS\

Leadtools.js
Leadtools.d.ts

Leadtools.js is the kernel of the LEADTOOLS JavaScript support and is required by all other libraries.

Import the LEADTOOLS Logic and Dependencies

Open the index.html file in the project folder. Add the below necessary script tags inside the head to import the application logic and LEADTOOLS dependencies.

<!doctype html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Myapp</title> 
        <base href="/"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="icon" type="image/x-icon" href="favicon.ico"> 
 
        <!-- Import the LEADTOOLS kernel --> 
        <script src="/assets/Leadtools.js"></script> 
        <!--Import script with our LEADTOOLS Logic--> 
        <script src="/assets/ltlogic.js"></script> 
    </head> 
    <body> 
        <app-root></app-root> 
    </body> 
</html>

Add the Set License Code

Inside the assets folder create a new JavaScript file, named ltlogic.js. This file is where the LEADTOOLS set license call will be added. Add the appropriate code block from the two options below.

Development License

If you have a JS license (LEADTOOLS.LIC.TXT) and key file (LEADTOOLS.LIC.KEY.TXT), you can use the code below to set your license:

window.onload = function () { 
  if (lt.RasterSupport.kernelExpired) { 
    var licenseUrl = "./assets/LEADTOOLS/LEADTOOLS.lic.txt"; 
    var developerKey = "ADD THE CONTENTS OF THE LEADTOOLS.lic.key.txt FILE"; 
    lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function ( 
      setLicenseResult) { 
      // Check the status of the license 
      if (setLicenseResult.result) { 
        console.log("LEADTOOLS client license set successfully."); 
      }  
      else { 
        var msg = "\nError:\nLEADTOOLS License is missing, invalid or expired"; 
        console.log(msg); 
        alert(msg); 
      }     
    }); 
  } 
}

Note: Make sure to replace the value of the developerKey string with the contents of the license key text file.

Evaluation License

If you are evaluating and do not have a JS license or key file, you can use the code below to set your license:

window.onload = function () { 
   if (lt.RasterSupport.kernelExpired) { 
      var licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; 
      var developerKey = "EVAL"; 
      lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function ( 
         setLicenseResult) { 
         // Check the status of the license 
         if (setLicenseResult.result) { 
            console.log("LEADTOOLS client license set successfully"); 
         }  
         else { 
            var msg = "\nError:\nLEADTOOLS License is missing, invalid or expired"; 
            console.log(msg); 
            alert(msg); 
         }     
      }); 
   } 
}

Run the Project

Open a terminal window, and navigate to the project's src folder. Use the following command to run the application:

npm start

The server should start and run on http://localhost:4200/. A message should appear in the console indicating where the server is available.

Open your browser and navigate to http://localhost:4200/. The following message is displayed in the Developer's Console (F12) to inform that the license has been set successfully.

Message to the console saying license set successfully.

Wrap-Up

This tutorial showed how to set a client-side LEADTOOLS license in an Angular application.