DevExtreme Angular - Add DevExtreme to an ASP.NET Core Angular Application
This article describes how to create an ASP.NET Core Angular application and add a DevExtreme widget to it. You need Visual Studio 2017 v15.7 or later and .NET Core 2.1 SDK to do this.
Open Visual Studio 2017 and use the ASP.NET Core Web Application template to create a new ASP.NET Core Angular application.
Open the
ClientApp/package.json
file and add thedevextreme
anddevextreme-angular
packages to thedependencies
section:package.json{ ... "dependencies": { ... "devextreme": "19.2.15", "devextreme-angular": "19.2.15" } }
Save the changes and wait until Visual Studio downloaded the dependencies.
Reference
dx.common.css
and a predefined theme stylesheet (dx.light.css
in the code below). If you are going to use Diagram or Gantt, add their stylesheets as well.For .NET Core SDK 2.1, change the
ClientApp/.angular-cli.json
file as follows:.angular-cli.json{ "apps": [ { ... "styles": [ "../node_modules/devextreme/dist/css/dx.common.css", "../node_modules/devextreme/dist/css/dx.light.css", "../node_modules/devexpress-diagram/dist/dx-diagram.css", // optional "../node_modules/devexpress-gantt/dist/dx-gantt.css" // optional ... ] } ] }
For .NET Core SDK 2.2 and later, make the following changes to the
ClientApp/angular.json
file:angular.json{ "projects": { "ApplicationName": { ... "architect": { "build": { ... "options": { ... "styles": [ ... "node_modules/devextreme/dist/css/dx.common.css", "node_modules/devextreme/dist/css/dx.light.css", "node_modules/devexpress-diagram/dist/dx-diagram.css", // optional "node_modules/devexpress-gantt/dist/dx-gantt.css" // optional ] } } } } } }
Only .NET Core SDK 2.2 and later: Register the JSZip library in the
ClientApp/tsconfig.json
file. The DataGrid widget component, which we are going to utilize at a later step, uses this library for client-side export to Excel.tsconfig.json{ ... "compilerOptions": { ... "paths": { "jszip": [ "node_modules/jszip/dist/jszip.min.js" ] } } }
Open the
ClientApp/src/app/app.module.ts
file and import modules that contain individual DevExtreme widgets or a module containing all the DevExtreme widgets and related utilities:app.module.ts// Imports an individual widget import { DxDataGridModule } from "devextreme-angular"; // Imports all the DevExtreme widgets // import { DevExtremeModule } from "devextreme-angular"; @NgModule({ ... imports: [ ... DxDataGridModule, // DevExtremeModule, ... ] })
Open the
ClientApp/src/app/fetch-data/fetch-data.component.html
file and replace the table in it with the following code. This code creates the DevExtreme DataGrid widget and binds it to sample data theFetchDataComponent
provides:fetch-data.component.html<dx-data-grid [dataSource]="forecasts"></dx-data-grid>
Run the application and navigate to the Fetch data page. You should see a DataGrid that displays weather forecast.
Refer to the following resources for code samples and usage examples:
Troubleshooting
Error E1046: The [FieldName] key field is not found in data objects
In ASP.NET Core, property names are converted to lowerCamelCase during serialization to JSON. If column data fields use the UpperCamelCase, then error E1046 occurs.
Apply one of the following solutions to troubleshoot this issue:
Disable the conversion in the JSON serializer
Open the
Startup.cs
file and modify theConfigureServices
method as follows:using Newtonsoft.Json.Serialization; // ... public void ConfigureServices(IServiceCollection services) { // ... services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews` .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver()); }
Since ASP.NET Core 3, you can use System.Text.Json instead of Newtonsoft.Json:
public void ConfigureServices(IServiceCollection services) { // ... services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews` .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null); }
IMPORTANTThis solution affects the entire application, and is not recommended if the controllers are used by non-DevExtreme components.Serialize objects in the API controller
Modify the API controller (
OrdersController
) that the DevExtreme widget is bound to as shown below:using Newtonsoft.Json; using Newtonsoft.Json.Serialization; // ... [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { var loadResult = DataSourceLoader.Load(SampleData.Orders, loadOptions); var json = JsonConvert.SerializeObject(loadResult, new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() }); return Content(json, "application/json"); }
If you have technical questions, please create a support ticket in the DevExpress Support Center.