Problems with integration with ASP.Net Core 2

[Klayton]

Good morning, my friends, I'm starting to learn angular and I also wanted to use kendo in my tests. I followed the installation according to this page https://www.telerik.com/kendo-angular-ui/getting-started/ however I came across some problems. I want to integrate kendo with angi with asp.net core 2. I created an Asp.Net Core-Angular application from Visual Studio 2017. In the index page I had to make the change from "asp-prerender-module" to "asp- ng2-prerender-module "after including kendo packages npm, so the application worked. But I have not been able to make the template work, the page says the following:

"
We'll take the Default theme and install it just like the Buttons package:

npm install --save @ progress / kendo-theme-default
Now, import the SCSS file from the package in src / styles.scss:

COPY CODE / * You can add global styles to this file, and also import other style files * /

@import "~ @ progress / kendo-theme-default / scss / all";
"

But I did not find the styles.scss file

How can I proceed?

Thank you very much.

[Dimiter Topalov]

Hello Klayton,

Thank you for your interest in our Kendo UI for Angular components. I can suggest checking out the following .NET Core + Kendo UI for Angular integration guide and the associated project that might contain useful information for your scenario:

https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core/

Most .NET Core + Angular templates do not support SCSS out-of-the-box, so the theme should be included either in the root component (or the one, using Kendo UI for Angular) or in the top-level view (e.g. Shared/_Layout.cshtml) e.g.:

https://www.telerik.com/kendo-angular-ui/components/styling/#toc-using-precompiled-css

https://github.com/telerik/kendo-angular-universal-demo/blob/master/aspnet_core_sample_application/ClientApp/app/components/fetchdata/fetchdata.component.ts

If you would like to benefit from the SCSS-related enhancements like customizing via variables, etc., you will need to manually install a SCSS/SASS loader and update the Webpack configuration so that the theme CSS makes it through the bundling process of the application.

Please find attached a sample application utilizing this approach (The Fetch data page features a Kendo UI for Angular Grid).

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[jwize]

I tried to use your app but it is totally broken when I run it. 

 

Loading...
ERROR in ./~/@progress/kendo-angular-l10n/dist/es/component-messages.js Module not found: Error: Can't resolve 'rxjs/operators/skip' in 'C:\Users\Jaime\Downloads\cf9649a7-473c-452a-87c1-1c371a5c264a_testApp\npmtest2\node_modules\@progress\kendo-angular-l10n\dist\es' @ ./~/@progress/kendo-angular-l10n/dist/es/component-messages.js 1:0-43 @ ./~/@progress/kendo-angular-l10n/dist/es/main.js @ ./~/@progress/kendo-angular-l10n/dist/es/index.js @ ./~/@progress/kendo-angular-grid/dist/es/grid.component.js @ ./~/@progress/kendo-angular-grid/dist/es/main.js @ ./ClientApp/app/app.shared.module.ts @ ./ClientApp/app/app.browser.module.ts @ ./ClientApp/boot.browser.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts
ERROR in ./~/@progress/kendo-angular-l10n/dist/es/localization.service.js Module not found: Error: Can't resolve 'rxjs/operators/map' in 'C:\Users\Jaime\Downloads\cf9649a7-473c-452a-87c1-1c371a5c264a_testApp\npmtest2\node_modules\@progress\kendo-angular-l10n\dist\es' @ ./~/@progress/kendo-angular-l10n/dist/es/localization.service.js 5:0-41 @ ./~/@progress/kendo-angular-l10n/dist/es/main.js @ ./~/@progress/kendo-angular-l10n/dist/es/index.js @ ./~/@progress/kendo-angular-grid/dist/es/grid.component.js @ ./~/@progress/kendo-angular-grid/dist/es/main.js @ ./ClientApp/app/app.shared.module.ts @ ./ClientApp/app/app.browser.module.ts @ ./ClientApp/boot.browser.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts
ERROR in ./~/@progress/kendo-angular-l10n/dist/es/localization.service.js Module not found: Error: Can't resolve 'rxjs/operators/tap' in 'C:\Users\Jaime\Downloads\cf9649a7-473c-452a-87c1-1c371a5c264a_testApp\npmtest2\node_modules\@progress\kendo-angular-l10n\dist\es' @ ./~/@progress/kendo-angular-l10n/dist/es/localization.service.js 6:0-41 @ ./~/@progress/kendo-angular-l10n/dist/es/main.js @ ./~/@progress/kendo-angular-l10n/dist/es/index.js @ ./~/@progress/kendo-angular-grid/dist/es/grid.component.js @ ./~/@progress/kendo-angular-grid/dist/es/main.js @ ./ClientApp/app/app.shared.module.ts @ ./ClientApp/app/app.browser.module.ts @ ./ClientApp/boot.browser.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

[Dimiter Topalov]

Hello Jaime,

As the environment is very dynamic and there are multiple new versions of many of the building blocks, involved in the application, various build errors can occur due to incompatibility between some of the versions of the packages involved.

The exact described error is likely caused by using incompatible versions of the RxJS and Kendo UI for Angular packages. Due to an unexpected breaking change introduced in a minor version of the RxJS package (v. 5.5.0), that is also required by Angular 5.x, we were forced to adapt our packages, introducing breaking changes ourselves:

https://github.com/telerik/kendo-angular/issues/1244

You can try upgrading all our packages to their latest versions that support RxJS 5.5+. All versions of our packages and the biggest changes they introduce, are listed in the Change Log section of the respective documentation section, e.g,:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/changelog/

That said, I can recommend checking out the following section of our documentation as we updated our .NET Core + Angular integration guide and sample application:

https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core/

And use the updated sample application that is based on the latest official Microsoft template.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik