DevExtreme Angular - Using SystemJS

IMPORTANT: This approach is not designed for production and exists primarily to get you started with learning and prototyping in Angular and DevExtreme.

NOTE
This tutorial is intended for use with the latest version of SystemJS. Compatibility with earlier versions is not guaranteed.

Install DevExtreme

Install the devextreme and devextreme-angular npm packages:

npm install devextreme@19.2 devextreme-angular@19.2 --save --save-exact
NOTE
We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes.

Configure SystemJS

Open the config.js file and configure DevExtreme and its dependencies as follows:

config.js
System.config({
    // ...
    paths: {
        "npm:": "node_modules/"
    },
    map: {
        // ...
        'devextreme': 'npm:devextreme',
        'devextreme-angular': 'npm:devextreme-angular',

        // for client-side Excel export in the DataGrid widget
        'jszip': 'npm:jszip/dist/jszip.min.js',

        // for the HtmlEditor widget
        'quill': 'npm:quill/dist/quill.min.js',
        'quill-delta-to-html': 'npm:quill-delta-to-html/dist/browser/QuillDeltaToHtmlConverter.bundle.js'
    },
    packages: {
        // ...
        'devextreme': {
            defaultExtension: 'js'
        },
        'devextreme-angular': {
            main: 'index.js',
            defaultExtension: 'js'
        }
    }
});

Reference Stylesheets

Open the index.html file and reference dx.common.css and a predefined theme stylesheet (dx.light.css in the code below).

index.html
<head>
    <!-- ... -->
    <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.common.css">
    <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.light.css">
    <!-- ... -->
</head>
NOTE
SVG-based widgets do not require theme stylesheets. If you choose to reference the stylesheets, the widgets apply an appearance that matches them.

Import DevExtreme Modules

Go to the NgModule in which you are going to use DevExtreme components and import the required DevExtreme modules. Note that if tree shaking is configured in your application, you can import the modules from devextreme-angular. Otherwise, you should import them from specific files.

app.module.ts
// ...
import { DxButtonModule } from 'devextreme-angular';
// or if tree shaking is not configured
// import { DxButtonModule } from 'devextreme-angular/ui/button';

@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})
export class AppModule { }

Now you can use the DevExtreme component in your application:

app.component.html
app.component.ts
<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

Run the Application

Run the application with the following command:

npm start

Open http://127.0.0.1:8080/ to browse the application.

Demos and Code Examples

Refer to the following resources for code samples and usage examples: