Skip to content

Latest commit

 

History

History
91 lines (74 loc) · 3.39 KB

add-narv-using-yarn-package-manager.md

File metadata and controls

91 lines (74 loc) · 3.39 KB
Raw
title description type page_title slug tags ticketid res_type
Using Native Angular Report Viewer with Yarn
Learn how the native Angular Report Viewer can be added to an Angular project that uses the yarn package manager.
how-to
Install the Native Angular Report Viewer using yarn
add-narv-using-yarn-package-manager
Angular, Native Angular Report Viewer, Yarn
1628141
kb

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]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/overview%}) 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:

    

    3. 



{
...
"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"
}
}




1. 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:

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



    

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



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