Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
- npm install devextreme@24.2 devextreme-angular@24.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.