Using Native Angular Report Viewer with Yarn

Environment

Product Version	17.2.23.1010+
Product	Progress® Telerik® Reporting
Report Viewer	Native Angular Report Viewer

Description

After adding the Native Angular Report Viewer to my project that uses the yarn package manager, the project does not build and there are warnings about unresolved peer dependencies and packages with incorrect versions.

Solution

1. Add the viewer package to the project's package.json with the yarn add @progress/telerik-angular-native-report-viewer command.

2. Use the resolutions field in package.json to specify the versions of the viewer's peer dependencies:

   {
       ...
       "resolutions": {
           "@progress/kendo-angular-buttons": "~13.2.0",
           "@progress/kendo-angular-common": "~13.2.0",
           "@progress/kendo-angular-dateinputs": "~13.2.0",
           "@progress/kendo-angular-dialog": "~13.2.0",
           "@progress/kendo-angular-dropdowns": "~13.2.0",
           "@progress/kendo-angular-icons": "~13.2.0",
           "@progress/kendo-angular-indicators": "~13.2.0",
           "@progress/kendo-angular-inputs": "~13.2.0",
           "@progress/kendo-angular-intl": "~13.2.0",
           "@progress/kendo-angular-l10n": "~13.2.0",
           "@progress/kendo-angular-label": "~13.2.0",
           "@progress/kendo-angular-layout": "~13.2.0",
           "@progress/kendo-angular-listbox": "~13.2.0",
           "@progress/kendo-angular-navigation": "~13.2.0",
           "@progress/kendo-angular-pager": "~13.2.0",
           "@progress/kendo-angular-popup": "~13.2.0",
           "@progress/kendo-angular-progressbar": "~13.2.0",
           "@progress/kendo-angular-toolbar": "~13.2.0",
           "@progress/kendo-angular-tooltip": "~13.2.0",
           "@progress/kendo-angular-treeview": "~13.2.0",
           "@progress/kendo-licensing": "^1.0.2",
           "@progress/telerik-common-report-viewer": "20.23.1010"
       }
   }
   

3. Some of the viewer's peer dependencies have their own dependencies that have to be manually added. The following command can be used to install the necesary packages:

   yarn add @angular-devkit/schematics @angular-devkit/core @progress/kendo-angular-upload @progress/kendo-drawing @progress/kendo-svg-icons
   

4. Lastly, run yarn or yarn install to make sure that all packages are installed.

Notes

Depending on the Angular version used in the project, the command from the 3rd step may need to be modified to install the correct version of the @angular packages, for example, with an Angular 16 project:

yarn add @angular-devkit/schematics@16 @angular-devkit/core@16 @progress/kendo-angular-upload @progress/kendo-drawing @progress/kendo-svg-icons

See Also

• Dependencies and versions
• Selective dependency resolutions