I am a .NET dev. Now learning Angular. I have created Angular solution use ASP.NET Core with Angular template. I have that running with a sample screen. Now I would like to use Telerik Kendo UI for Angular components and I don't have the slight idea how to install them. For Blazor we just installed from the Progress Control panel and added the NuGet packages in the VS Package manager. For Angular I have no idea. Can someone tell me how to get started? I have looked thru the doco online here but nothing seems to address using them in Visual Studio.
3 Answers, 1 is accepted
Hi David,
Thank you for the provided information.
Indeed we have detailed instructions on how to set up an Angular Project.
Please see the following documentation to see the instructions:
https://www.telerik.com/kendo-angular-ui/components/getting-started/
Also, check out the following GitHub repo for a sample project demonstrating how to use Kendo UI for Angular components with ASP.NET Core:
https://github.com/telerik/kendo-angular/tree/master/examples-standalone/aspnetcore-data
Let me know if there is anything else I can help with.
Regards,
Valentin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Iron
I get this error and have no idea what to do about it when trying to install the grid component:
C:\Users\david>cd C:\Projects\VSWorkspace\SPOTES_Agile\SPOT_ES_AGILE_DEVTEAM\SPOTES_ARCHDEMOS\AngularDemo\ClientApp
C:\Projects\VSWorkspace\SPOTES_Agile\SPOT_ES_AGILE_DEVTEAM\SPOTES_ARCHDEMOS\AngularDemo\ClientApp>ng add @progress/kendo-angular
Your global Angular CLI version (13.2.2) is greater than your local version (12.2.2). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
i Using package manager: npm
× Unable to load package information from registry: 404 Not Found - GET https://registry.npmjs.org/@progress%2fkendo-angular - Not found
C:\Projects\VSWorkspace\SPOTES_Agile\SPOT_ES_AGILE_DEVTEAM\SPOTES_ARCHDEMOS\AngularDemo\ClientApp>ng add @progress/kendo-angular-grid
Your global Angular CLI version (13.2.2) is greater than your local version (12.2.2). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
i Using package manager: npm
√ Found compatible package version: @progress/kendo-angular-grid@6.0.1.
√ Package information loaded.
The package @progress/kendo-angular-grid@6.0.1 will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
UPDATE src/app/app.module.ts (1514 bytes)
UPDATE package.json (2576 bytes)
UPDATE angular.json (4192 bytes)
| Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: angularspotdemo@0.0.0
npm ERR! Found: @angular/compiler@12.2.2
npm ERR! node_modules/@angular/compiler
npm ERR! @angular/compiler@"~12.2.2" from the root project
npm ERR! peer @angular/compiler@"12.2.2" from @angular/compiler-cli@12.2.2
npm ERR! node_modules/@angular/compiler-cli
npm ERR! dev @angular/compiler-cli@"~12.2.2" from the root project
npm ERR! peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.2
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"~12.2.2" from the root project
npm ERR! 1 more (@ngtools/webpack)
npm ERR! 2 more (@angular/platform-browser-dynamic, @angular/platform-server)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/localize@"~12.2.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@12.2.16
npm ERR! node_modules/@angular/compiler
npm ERR! peer @angular/compiler@"12.2.16" from @angular/localize@12.2.16
npm ERR! node_modules/@angular/localize
npm ERR! @angular/localize@"~12.2.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\david\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\david\AppData\Local\npm-cache\_logs\2022-02-03T14_10_30_341Z-debug.log
HERE is the log:
0 verbose cli [
0 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli 'install',
0 verbose cli '--quiet'
0 verbose cli ]
1 info using npm@8.1.2
2 info using node@v16.13.2
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 3ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 7ms
6 timing config:load:builtin Completed in 7ms
7 timing config:load:cli Completed in 5ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Projects\VSWorkspace\SPOTES_Agile\SPOT_ES_AGILE_DEVTEAM\SPOTES_ARCHDEMOS\AngularDemo\ClientApp\.npmrc Completed in 0ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:C:\Users\david\.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:C:\Users\david\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 2ms
17 timing config:load:setEnvs Completed in 2ms
18 timing config:load Completed in 24ms
19 timing npm:load:configload Completed in 24ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 9ms
23 timing npm:load:cleanupLog Completed in 7ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 4ms
26 timing npm:load Completed in 47ms
27 timing arborist:ctor Completed in 3ms
28 timing idealTree:init Completed in 3252ms
29 timing idealTree:userRequests Completed in 1ms
30 silly idealTree buildDeps
31 silly fetch manifest @angular/localize@~12.2.2
32 timing arborist:ctor Completed in 0ms
33 http fetch GET 200 https://registry.npmjs.org/@angular%2flocalize 3124ms (cache miss)
34 silly fetch manifest @angular/compiler@~12.2.2
35 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler 117ms (cache miss)
36 silly fetch manifest @angular/compiler-cli@~12.2.2
37 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler-cli 128ms (cache miss)
38 silly fetch manifest typescript@~4.2.3
39 http fetch GET 200 https://registry.npmjs.org/typescript 465ms (cache miss)
40 silly fetch manifest @progress/kendo-theme-default@^5.0.0
41 http fetch GET 200 https://registry.npmjs.org/@progress%2fkendo-theme-default 868ms (cache miss)
42 timing idealTree Completed in 8189ms
43 timing command:install Completed in 8216ms
44 verbose stack Error: could not resolve
44 verbose stack at PlaceDep.failPeerConflict (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:544:25)
44 verbose stack at PlaceDep.place (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:197:21)
44 verbose stack at new PlaceDep (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:71:10)
44 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:944:31
44 verbose stack at Array.map (<anonymous>)
44 verbose stack at Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:944:8)
44 verbose stack at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
44 verbose stack at async Promise.all (index 1)
44 verbose stack at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
44 verbose stack at async Install.install (C:\Program Files\nodejs\node_modules\npm\lib\install.js:170:5)
45 verbose cwd C:\Projects\VSWorkspace\SPOTES_Agile\SPOT_ES_AGILE_DEVTEAM\SPOTES_ARCHDEMOS\AngularDemo\ClientApp
46 verbose Windows_NT 10.0.19043
47 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--quiet"
48 verbose node v16.13.2
49 verbose npm v8.1.2
50 error code ERESOLVE
51 error ERESOLVE could not resolve
52 error
53 error While resolving: angularspotdemo@0.0.0
53 error Found: @angular/compiler@12.2.2
53 error node_modules/@angular/compiler
53 error @angular/compiler@"~12.2.2" from the root project
53 error peer @angular/compiler@"12.2.2" from @angular/compiler-cli@12.2.2
53 error node_modules/@angular/compiler-cli
53 error dev @angular/compiler-cli@"~12.2.2" from the root project
53 error peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.2
53 error node_modules/@angular-devkit/build-angular
53 error dev @angular-devkit/build-angular@"~12.2.2" from the root project
53 error 1 more (@ngtools/webpack)
53 error 2 more (@angular/platform-browser-dynamic, @angular/platform-server)
53 error
53 error Could not resolve dependency:
53 error @angular/localize@"~12.2.2" from the root project
53 error
53 error Conflicting peer dependency: @angular/compiler@12.2.16
53 error node_modules/@angular/compiler
53 error peer @angular/compiler@"12.2.16" from @angular/localize@12.2.16
53 error node_modules/@angular/localize
53 error @angular/localize@"~12.2.2" from the root project
53 error
53 error Fix the upstream dependency conflict, or retry
53 error this command with --force, or --legacy-peer-deps
53 error to accept an incorrect (and potentially broken) dependency resolution.
53 error
53 error See C:\Users\david\AppData\Local\npm-cache\eresolve-report.txt for a full report.
54 verbose exit 1
Rank 1
Iron
Iron
Iron
Ok figure out how to set the npm config to --legacy-peer-deps
Then ran the grid install and it seems to have worked! Thanks for the help!! This is so different that using nuget packages. It's all manual.
Hi David,
I am glad to hear that you have managed to resolve the experienced issue.
In case of any further questions related to the Kendo UI for Angular do not hesitate to open a new support ticket.