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
-
Download .NET Core version 2.0 or later. By default, the .NET Core framework ships with Visual Studio 2017.
-
Clone the repository by executing
git clone https://github.com/telerik/kendo-angular-quickstart-dotnet.git
. -
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), runSET ASPNETCORE_Environment=Development
. On Linux or macOS, runexport 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:
-
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" ]
-
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:
- Follow the instructions in the official Microsoft guide, or
- Refer to the server-side rendering sample application project which features the same sample application after the adjustments were applied.
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 {}