DevExtreme Angular - Using Rollup

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

Install DevExtreme

Install the devextreme and devextreme-angular npm packages:

npm install devextreme@21.1 devextreme-angular@21.1 --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 Rollup

Install the rollup-plugin-node-resolve, rollup-plugin-commonjs, and rollup-plugin-alias packages with the following command...

npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-alias

... and configure them in the rollup-config.js file:

rollup-config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import alias from 'rollup-plugin-alias';
// ...
export default {
    // ...
    plugins: [
        alias({
            jszip: path.join(__dirname, './node_modules/jszip/dist/jszip.min.js')
        }),
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: [
                './node_modules/rxjs/**',
                './node_modules/jszip/**',
                './node_modules/devextreme/**',
                './node_modules/devextreme-angular/**'
            ]
        })
    ]
    // ...
}

Import Stylesheets

Go to the NgModule in which you are going to use DevExtreme UI components and import a predefined theme stylesheet (dx.light.css in the code below).

app.module.ts
import 'devextreme/dist/css/dx.light.css';
// ...
// DevExtreme modules will be imported here later
// ...

To create a single CSS bundle, you can use the rollup-plugin-css-only package. Install it with the following command...

npm install --save-dev rollup-plugin-css-only

... and configure it in the rollup-config.js file.

rollup-config.js
import css from 'rollup-plugin-css-only';
// ...

export default {
    // ...
    plugins: [
        css({ output: 'dist/bundle.css' }),
        // ...
    ]
}
NOTE
SVG-based UI components do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.

Import DevExtreme Modules

Import the required DevExtreme modules after the stylesheets in the same NgModule. Note that because DevExtreme modules do not support tree shaking with Rollup, you should import the modules from specific files (as shown below) rather than from the main devextreme-angular module.

app.module.ts
// ...
// DevExtreme stylesheets are imported here
// ...
import { DxButtonModule } from 'devextreme-angular/ui/button';

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

Now you can use the DevExtreme UI 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

Build the application with the following command...

npm run build

... and open the index.html file in your browser.

Demos and Code Examples

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