Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@23.2 devextreme-angular@23.2 --save --save-exact
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:
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).
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.
import css from 'rollup-plugin-css-only'; // ... export default { // ... plugins: [ css({ output: 'dist/bundle.css' }), // ... ] }
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.
// ... // 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:
<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!'); } }
If you have technical questions, please create a support ticket in the DevExpress Support Center.