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.

NOTE
Earlier Visual Studio and .NET Core SDK versions are supported by DevExtreme v17.2. You can find instructions in this article.
  1. Open Visual Studio 2017 and use the ASP.NET Core Web Application template to create a new ASP.NET Core Angular application.

  2. Open the ClientApp/package.json file and add the devextreme and devextreme-angular packages to the dependencies section:

    package.json
    {
      ...
      "dependencies": {
        ...
        "devextreme": "19.1.3",
        "devextreme-angular": "19.1.3"
      }
    }

    Save the changes and wait until Visual Studio downloaded the dependencies.

  3. Reference dx.common.css and a predefined theme stylesheet (dx.light.css in the code below).

    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",
            ...
          ] 
        }
      ]
    }

    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"
                ]
              }
            }
          }
        }
      }
    }
  4. 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"
          ]
        }
      }
    }
  5. 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,
            ... 
        ] 
    })
  6. 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 the FetchDataComponent 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: