All Components

Using with .NET Core

Kendo UI for Angular provides options for integrating ASP.NET Core and building universally rendered applications.

For a working example of a universally rendered ASP.NET Core application, refer to the aspnet_core_sample_application repository on GitHub.

Sample Project

To configure the sample universally rendered ASP.NET Core application:

  1. Run the project
  2. Add the styles

Running the Project

  1. Download .NET Core version 1.0 or later. By default, the .NET Core framework ships with Visual Studio 2017.
  2. Clone the repository by executing git clone https://github.com/telerik/kendo-angular-universal-demo.git.
  3. Enter the aspnet_core_sample_application project directory.
  4. Start the application by running the following commands:
    1. dotnet restore
    2. npm install
    3. webpack --config webpack.config.vendor.js
    4. webpack
    5. dotnet run

For more details on using ASP.NET Core in the Angular context, refer to:

Adding the Styles

The sample project does not include an SCSS/SASS loader. As a result, to use or customize a Kendo UI theme through its variables:

  1. Install an SCSS/SASS loader.
  2. Configure Webpack to use the loader for processing SCSS files.
  3. Include the generated CSS file in the application.

Troubleshooting

This section provides solutions for common issues you might encounter while running the sample ASP.NET Core application.

The use of Angular animations in universally rendered applications causes JS errors

When you use Angular animations in universally rendered applications, you might get similar errors:

EXCEPTION: document is not defined
ORIGINAL STACKTRACE:
ReferenceError: document is not defined
at DefaultDomRenderer2.selectRootElement (...)

Solution

Include NoopAnimationsModule in ServerModule to avoid issues that are typically caused by referring browser objects in server-side code.

import { NgModule } from "@angular/core";
import { ServerModule } from "@angular/platform-server";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import { sharedConfig } from "./app.module.shared";

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        ServerModule,
        NoopAnimationsModule,
        ...sharedConfig.imports
    ]
})
export class AppModule {}

The use of particular or different versions of Angular packages causes JS errors

When you use particular or different versions of Angular packages in your project, you might get similar errors:

WARNING in ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js
329:2-21 "export '╔ÁDomAnimationEngine' was not found in '@angular/animations/browser'

WARNING in ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js
382:43-63 "export '╔ÁNoopAnimationEngine' was not found in '@angular/animations/browser'

Solution

  1. Install the 4.2.2 Angular package version or later. For a seamless performance, it is recommended that you always use the latest official versions of Angular packages.
  2. Make sure you have the same version across all Angular packages that are installed in your project.
In this article