New to Kendo UI for Angular? Start a free 30-day trial

Using with .NET Core

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

As a base starting point, the suite uses this Microsoft Angular project template. For a working example on the ASP.NET Core application, refer to the kendo-angular-quickstart-dotnet repository on GitHub.

Sample Project

To configure the sample ASP.NET Core application, follow the instructions in the official Microsoft guide.

Setting Up

  1. Download .NET Core version 2.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-quickstart-dotnet.git.

  3. Start the application:

    3.1. Make sure that you have an ASPNETCORE_Environment environment variable with a value of Development. On Windows (in non-PowerShell prompts), run SET ASPNETCORE_Environment=Development. On Linux or macOS, run export ASPNETCORE_Environment=Development.

    3.2. Run dotnet build to verify the app builds. On the first run, which might take several minutes, the build process restores the NPM dependencies. Subsequent builds are much faster.

    3.3. Run dotnet run to start the application.

Adding the Styles

To fully benefit from the SCSS capabilities of the Kendo UI themes:

  1. Create a styles.scss file in the ClientApp/src folder. Include the file in the "styles" array of the .angular-cli.json file.

    "styles": [
        "styles.scss"
    ]
  2. In the styles.scss file, import the Kendo UI theme as described in the article on getting started.

    /* You can add global styles to this file, and also import other style files. */
    @import "~@progress/kendo-theme-default/scss/all";

Server-Side Rendering

To enable the server-side rendering of the project, either:

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 {}