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
- Add the viewer package to the project's
package.json
with theyarn add @progress/telerik-angular-native-report-viewer
command. -
Use the
resolutions
field inpackage.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" } }
-
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
Lastly, run
yarn
oryarn 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