Installation of Syncfusion Controls

17 May 20251 minute to read

Install by using NPM CLI

Syncfusion packages are distributed in npm as @syncfusion scoped packages. All Angular Syncfusion packages can be found on npm.

Currently, Syncfusion provides two types of package structures for Angular components,

Ivy library distribution package format
Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package.

Ivy Library Distribution Package

By default, Syncfusion Angular packages(>=20.2.36) supports Angular Ivy distribution. These packages are compatible with Angular version 12 and above. To install the package use the below command,

Add the @syncfusion/ej2-angular-grids package to the application.

npm install @syncfusion/ej2-angular-grids --save

Angular compatibility compiled package (ngcc)

For Angular version below 12, use the ngcc tagged packages of the Syncfusion Angular components. To install the package use the following command,

Add the @syncfusion/ej2-angular-grids@ngcc package to the application.

npm install @syncfusion/ej2-angular-grids@ngcc --save

To specify the ngcc package in the package.json file, add the suffix -ngcc with the package version as shown below.

@syncfusion/ej2-angular-grids:"20.2.38-ngcc"

If the ngcc tag is not specified while installing the package for Angular versions below 12, the Ivy package will be installed with a warning.

Install by using package.json

Add the Syncfusion Angular (Essential JS 2) package references in the dependencies section of the ~/package.json file.
```
 {
     "dependencies": {
         "@syncfusion/ej2-angular-grids": "*",
         "@syncfusion/ej2-angular-charts": "*"
     }
 }
```
The * indicates the latest version of the npm package. Refer to the documentation for more details about npm versioning.
Now, open the command prompt and run the npm install command. This will install all npm dependencies in a single command.

Refer to the documentation for more details about npm package.json