New to Telerik Reporting? Download free 30-day trial

Using Native Angular Report Viewer with Yarn


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


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.


  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.


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

In this article