Add DevExtreme to NET Core Angular 2 Template

Create an Application

Create an ASP.NET Core Angular 2 application using the "ASP.NET Core Angular 2 Starter Application (.NET Core)" template. For details, refer to the Steve Sanderson's Blog.

ASP.NET Core Angular 2 Starter Application (.NET Core) application template

Add npm Packages

Once the application is created, apply the following changes to the "package.json" file located in the root folder of the project. Add the "devextreme" and "devextreme-angular" packages to the dependencies section as illustrated in the following image.

Add the "devextreme-angular" package to dependencies

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

Configure Webpack

Register the required .css files in the "webpack.config.vendor.js" file located in the root folder.

entry: { 
    vendor: [ 
    ...
        'devextreme/dist/css/dx.common.css',
        'devextreme/dist/css/dx.light.css'
    ] 
}

Add DevExtreme css files to webpack config

After Webpack is configured, run the following command in the command prompt to update the vendor bundle.

webpack --config webpack.config.vendor.js

Add DevExtreme Modules to Angular 2 Application

To use DevExtreme within the Angular application, import the required separate modules or entire DevExtreme to this application within the "ClientApp/app/app.module.ts" file.

//Imports a separate module
import { DxButtonModule } from 'devextreme-angular/ui/button'; 
//Imports the entire DevExtreme
import { DevExtremeModule } from 'devextreme-angular'; 

Add the imported modules to application imports:

@NgModule({ 
    ... 
    imports: [ 
        ... 
        DevExtremeModule, 
        ... 
    ] 
})

Add DevExtreme css files to webpack config

Switch off Server-side Rendering

Currently, the DevExtreme components do not support server side rendering. Thus, make sure that this feature is disabled. To disable server-side rendering, remove the "asp-prerender-module" attribute from the app element in the "Views/Home/Index.cshtml" file.

Use

<app>Loading...</app>

instead of

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

Disable server-side rendering

Add a DevExtreme Component to a View

After you have performed all the steps described above, you can add DevExtreme controls on application views. To see how this works, replace the existing table in the "ClientApp/app/components/fetchdata/fetchdata.component.html" file with the DevExtreme data grid.

<dx-data-grid [dataSource]="forecasts"></dx-data-grid>

For more information on working with DevExtreme controls in an Angular 2 approach, refer to the DevExtreme-Angular library description.