Do I need special certification to install kendo

[mark]

     I have this in my package.json:

"@progress/kendo-angular-buttons": "^5.4.1",
    "@progress/kendo-angular-common": "^1.2.2",
    "@progress/kendo-angular-dateinputs": "^4.2.2",
    "@progress/kendo-angular-dropdowns": "^4.2.6",
    "@progress/kendo-angular-excel-export": "^3.1.3",
    "@progress/kendo-angular-grid": "^4.7.0",
    "@progress/kendo-angular-inputs": "^6.5.1",
    "@progress/kendo-angular-intl": "^2.0.1",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-layout": "^4.2.3",
    "@progress/kendo-angular-pdf-export": "^2.0.3",
    "@progress/kendo-angular-popup": "^3.0.5",
    "@progress/kendo-data-query": "^1.5.3",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-theme-default": "^4.17.0",
    "@progress/kendo-theme-material": "^3.14.0",

Is it all kendo? Will every component be working? How to add them all?

[Svet]

Hi Mark,

I noticed a few tickets opened on the same matter. I will provide some general information that should provide some more insights on the topic.

To begin with, the Angular framework itself is distributed and installed in the form of NPM packages, and as the Kendo UI for Angular components require an Angular application to be used in, they also follow similar distribution and installation mechanics.

Indeed, the Kendo UI for Angular suite is installed directly from NPM, but all terms and conditions, outlined in the End User License Agreement (EULA) still apply.

This license enables holders to legally use our components in their applications, as well as to utilize our support service in accordance with their support plan. You can check the available Kendo licenses at the following link:

https://www.telerik.com/purchase/kendo-ui

About the second part of the thread, there isn't an option to install all Kendo UI for Angular packages with a single command. What could be done is to install all dependencies for a single Kendo UI for Angular package via its provided ng add command. The installation section of each Kendo component demonstrates its ng add command. Check for example the Grid Installation article:

https://www.telerik.com/kendo-angular-ui/components/grid/get-started/#toc-installation

running ng add @progress/kendo-angular-grid will make sure to add automatically all required dependencies for the Grid in the project:

 

@progress/kendo-angular-grid 
@progress/kendo-angular-dropdowns 
@progress/kendo-angular-inputs
@progress/kendo-angular-dateinputs
@progress/kendo-data-query
@progress/kendo-angular-intl
@progress/kendo-angular-l10n
@progress/kendo-drawing
@progress/kendo-angular-excel-export
@progress/kendo-angular-buttons
@progress/kendo-angular-common
@progress/kendo-angular-pdf-export
@progress/kendo-angular-popup

 

Still it is also possible to install them manually via NPM as demonstrated in the Manual Setup section of the Installation article:

https://www.telerik.com/kendo-angular-ui/components/grid/get-started/#toc-manual-setup

Please note that the ng add command imports the respective module to the app.module.ts file accordingly. But if the manual installation is followed then the developer should import the respective modules manually to the app.module.ts file.

In general it is recommended to install just the needed dependencies as otherwise the node_modules folder will contain data that isn't needed by the project.

Once the project is setup to use all required dependencies these will be available in the project root package.json file. It is possible to copy all Kendo packages and paste them in another project package.json file. Check for example the package.json file of the following StackBlitz example:

https://stackblitz.com/edit/angular-ot7ace?file=app%2Fapp.component.ts

package.json:

 

{
  "name": "4othkt.run",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "rxjs": "6.5.3",
    "tslib": "1.11.1",
    "core-js": "2.6.11",
    "zone.js": "0.9.1",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/common": "8.2.14",
    "@angular/router": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/animations": "8.2.14",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "hammerjs": "2.0.8",
    "web-animations-js": "2.3.1",
    "@telerik/kendo-intl": "2.1.1",
    "@telerik/kendo-draggable": "2.1.0",
    "@progress/kendo-date-math": "1.5.1",
    "@progress/kendo-drawing": "1.6.0",
    "@progress/kendo-data-query": "1.5.3",
    "@progress/kendo-file-saver": "1.0.7",
    "@progress/kendo-charts": "1.13.7",
    "@progress/kendo-recurrence": "1.0.1",
    "@progress/kendo-angular-buttons": "5.4.1",
    "@progress/kendo-angular-common": "1.2.2",
    "@progress/kendo-angular-charts": "4.1.4",
    "@progress/kendo-angular-conversational-ui": "2.0.1",
    "@progress/kendo-angular-dateinputs": "4.2.2",
    "@progress/kendo-angular-dialog": "4.1.3",
    "@progress/kendo-angular-dropdowns": "4.2.6",
    "@progress/kendo-angular-editor": "1.0.6",
    "@progress/kendo-angular-excel-export": "3.1.3",
    "@progress/kendo-angular-gauges": "3.0.1",
    "@progress/kendo-angular-grid": "4.7.1",
    "@progress/kendo-angular-inputs": "6.5.1",
    "@progress/kendo-angular-intl": "2.0.1",
    "@progress/kendo-angular-l10n": "2.0.1",
    "@progress/kendo-angular-label": "2.3.0",
    "@progress/kendo-angular-layout": "4.2.3",
    "@progress/kendo-angular-menu": "2.0.2",
    "@progress/kendo-angular-notification": "2.1.0",
    "@progress/kendo-angular-pdf-export": "2.0.3",
    "@progress/kendo-angular-popup": "3.0.5",
    "@progress/kendo-angular-progressbar": "0.2.3",
    "@progress/kendo-angular-ripple": "2.0.1",
    "@progress/kendo-angular-scheduler": "1.1.5",
    "@progress/kendo-angular-scrollview": "3.0.1",
    "@progress/kendo-angular-sortable": "3.0.2",
    "@progress/kendo-angular-toolbar": "3.1.1",
    "@progress/kendo-angular-tooltip": "2.1.2",
    "@progress/kendo-angular-treeview": "4.1.3",
    "@progress/kendo-angular-treelist": "0.2.0",
    "@progress/kendo-angular-upload": "5.2.1"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

 

Once the packages are imported properly they can be update all at once to the latest Kendo versions by following the instructions on the following article:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

I hope the provided information helps. Please let me know in case any additional details are required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[mark]

So, after copying the yellow part into my package,json do I need to run npm install?

Thanks

[Svet]

Hi Mark,

Sure, if you are simply copy and pasting the highlighted part in package.json then the dependencies should be also installed via the npm install command. The corresponding modules would then also have to be manually imported in app.module.ts. That process is demonstrated in each component installation section (please check step 2):

https://www.telerik.com/kendo-angular-ui/components/grid/get-started/#toc-manual-setup

Using the corresponding ng add command would perform that part automatically.

In order to make sure that the latest specified versions are installed, you may have to remove the already existing node_modules folder and any existing package-lock.json file as it may tell the application to use only some pre-specified version dependencies.

Regards,
Svetlin
Progress Telerik