Rank 1
Iron
Iron
Hello,
When attempting to run the following,
ng add @progress/telerik-angular-native-report-viewer
to our Angular 16 project, it's complaining about peer dependencies.
C:\dev\git-projects\my-app>ng add @progress/telerik-angular-native-report-viewer
i Using package manager: npm
‼ Unable to find compatible package. Using 'latest' tag.
‼ Package has unmet peer dependencies. Adding the package may not succeed.
The package @progress/telerik-angular-native-report-viewer@21.24.305 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ha...y@6.3.45
npm ERR! Found: @progress/kendo-angular-buttons@15.4.0
npm ERR! node_modules/@progress/kendo-angular-buttons
npm ERR! @progress/kendo-angular-buttons@"^15.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @progress/kendo-angular-buttons@"14" from @progress/telerik-angular-native-report-viewer@21.24.305
npm ERR! node_modules/@progress/telerik-angular-native-report-viewer
npm ERR! @progress/telerik-angular-native-report-viewer@"21.24.305" from the root project
----------------------
At first I upgraded kendo-angular-buttons from v15.0 to 15.4.0, but even so, I keep seeing this strange dependency on v14 - i.e. @progress/kendo-angular-buttons@"14" .
I'll post my package dependencies, if it may help:
"dependencies": {
"@angular-devkit/schematics": "^16.2.12",
"@angular/animations": "^16.2.12",
"@angular/cdk": "^16.2.14",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/localize": "^16.2.12",
"@angular/material": "^16.2.14",
"@angular/material-moment-adapter": "^16.2.14",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12",
"@angular/service-worker": "^16.2.12",
"@azure/msal-angular": "^3.0.13",
"@azure/msal-browser": "^3.10.0",
"@egjs/hammerjs": "^2.0.17",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@okta/okta-angular": "^6.3.2",
"@okta/okta-auth-js": "^7.5.1",
"@progress/kendo-angular-buttons": "^15.4.0",
"@progress/kendo-angular-common": "^15.4.0",
"@progress/kendo-angular-dateinputs": "^15.4.0",
"@progress/kendo-angular-dropdowns": "^15.4.0",
"@progress/kendo-angular-excel-export": "^15.4.0",
"@progress/kendo-angular-grid": "^15.4.0",
"@progress/kendo-angular-inputs": "^15.4.0",
"@progress/kendo-angular-intl": "^15.4.0",
"@progress/kendo-angular-l10n": "^15.4.0",
"@progress/kendo-angular-label": "^15.4.0",
"@progress/kendo-angular-layout": "^15.4.0",
"@progress/kendo-angular-pdf-export": "^15.4.0",
"@progress/kendo-angular-popup": "^15.4.0",
"@progress/kendo-angular-progressbar": "^15.4.0",
"@progress/kendo-angular-ripple": "^15.4.0",
"@progress/kendo-angular-treeview": "^15.4.0",
"@progress/kendo-data-query": "^1.5.4",
"@progress/kendo-drawing": "^1.9.1",
"@progress/kendo-licensing": "^1.3.5",
"@progress/kendo-theme-material": "^3.19.0",
"ajv": "^6.11.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.6.4",
"css-element-queries": "^1.2.3",
"d3": "^5.15.0",
"dexie": "^3.2.4",
"fast-deep-equal": "^3.1.1",
"file-saver": "^2.0.2",
"gl-matrix": "^3.1.0",
"hammerjs": "^2.0.8",
"http-status-codes": "^1.3.2",
"js-base64": "^3.4.5",
"keycharm": "^0.3.1",
"ngx-bootstrap": "^11.0.2",
"ngx-mqtt": "^16.1.0",
"ngx-toastr": "^17.0.2",
"npm-run-all": "^4.1.5",
"popper.js": "^1.16.1",
"ramda": "0.26.1",
"rxjs": "^7.8.1",
"tslib": "^2.0.0",
"uri-js": "^4.4.1",
"uuid": "^8.3.0",
"vis-data": "^7.1.9",
"vis-network": "^9.1.9",
"vis-util": "^5.0.7",
"vkbeautify": "^0.99.3",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.12",
"@angular/cli": "^16.2.12",
"@angular/compiler-cli": "^16.2.12",
"@angular/language-service": "^16.2.12",
"@fortawesome/fontawesome-free": "^5.12.1",
"@progress/kendo-angular-messages": "^1.56.0",
"@types/d3-array": "^2.0.0",
"@types/d3-axis": "^1.0.12",
"@types/d3-brush": "^1.0.10",
"@types/d3-color": "^1.2.2",
"@types/d3-scale": "^2.1.1",
"@types/d3-scale-chromatic": "^1.3.1",
"@types/d3-selection": "^1.4.1",
"@types/d3-shape": "^1.3.2",
"@types/d3-time-format": "^2.1.1",
"@types/d3-zoom": "^1.7.4",
"@types/file-saver": "^2.0.1",
"@types/gl-matrix": "^2.4.5",
"@types/hammerjs": "^2.0.36",
"@types/js-base64": "^2.3.1",
"@types/node": "^18.16.20",
"@types/ramda": "^0.26.41",
"@types/vis": "^4.21.14",
"prettier": "^1.19.1",
"protractor": "~7.0.0",
"roboto-fontface": "^0.10.0",
"ts-node": "^8.6.2",
"typescript": "~4.9.5"
}
I've tried a few lower versions from npm but nothing works - i.e. https://www.npmjs.com/package/@progress/telerik-angular-native-report-viewer
FYI: I do have the std HTML5 Telerik Report Viewer working on another branch, along with the JQuery npm package - but I uninstalled both. And of course I did that in order to use your native Angular report viewer instead.
Thank you in advance,
Bob
1 Answer, 1 is accepted
Hello Bob,
Thank you for the provided information!
The Native Angular Report Viewer is built with version 14.0.0 of Kendo UI for Angular suite and since there are references to some Kendo Angular packages of a newer version in the package.json, you need to use the --force flag when installing the native report viewer package, for example:
npm install @progress/telerik-angular-native-report-viewer --force
This will not affect the rest of the application, and the Kendo Angular components used outside of the report viewer should be of their version referenced in package.json, in this case, v15.4.0.
I hope this will help.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Iron
Hi Dimitar,
Thanks for confirming. Much clearer now.
Bob