Add DevExtreme to an Angular CLI Application
To start this tutorial, you need an Angular 5+ application created using the Angular CLI. Refer to the Angular CLI documentation for information on how to create such an application. You can also create an Angular application with DevExtreme already added to it.
One-Command Setup
You can install and configure DevExtreme and its dependencies with a single npx command that is part of the DevExtreme CLI:
npx -p devextreme-cli devextreme add devextreme-angular
npx is available with npm v5.2 and later. If you have an earlier version, upgrade npm or install the DevExtreme CLI globally and run the command from the installed package:
npm i -g devextreme-cli devextreme add devextreme-angular
After you run the command, you can skip the following articles and move on straight to importing DevExtreme modules.
If the command is unavailable for any reason, follow the instructions below for manual setup.
Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@19.1 devextreme-angular@19.1 --save --save-exact
Configure Stylesheets
Open the angular.json
file and reference dx.common.css
and a predefined theme stylesheet (dx.light.css
in the code below).
{ "projects": { "ProjectName": { "architect": { "build": { "options": { "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "node_modules/devextreme/dist/css/dx.light.css", "src/styles.css" ], ... }, ... }, ... } }, ... }, ... }
For Angular CLI before 6, modify the angular-cli.json
file instead:
{ "apps": [{ "styles": [ ... "../node_modules/devextreme/dist/css/dx.common.css", "../node_modules/devextreme/dist/css/dx.light.css", "styles.css" ], ... }], ... }
JSZip Registration
If you want to use the DataGrid widget, register the JSZip library in the tsconfig.json
file. The widget uses this library for client-side export to Excel.
{ ... "compilerOptions": { ... "paths": { "jszip": [ "node_modules/jszip/dist/jszip.min.js" ] } } }
Globalize Registration
If you want to use Globalize for localization, install it and the devextreme-cldr-data
extension:
npm install --save-dev devextreme-cldr-data globalize
Then, register the Globalize and CLDR scripts in the tsconfig.json
file...
{ ... "compilerOptions": { ... "paths": { "globalize": [ "node_modules/globalize/dist/globalize" ], "globalize/*": [ "node_modules/globalize/dist/globalize/*" ], "cldr": [ "node_modules/cldrjs/dist/cldr" ], "cldr/*": [ "node_modules/cldrjs/dist/cldr/*" ], "jszip": [ "node_modules/jszip/dist/jszip.min.js" ] } } }
... and create a typings.d.ts
file in the src
folder with ambient declarations for Globalize, DevExtreme localization messages, and devextreme-cldr-data
:
declare module 'globalize' { const value: any; export default value; } declare module 'devextreme/localization/messages/*' { const value: any; export default value; } declare module 'devextreme-cldr-data/*' { const value: any; export default value; }
In projects created with Angular CLI version 5 and earlier, configure config.js as follows instead:
System.config({ // ... paths: { "npm:": "node_modules/" }, map: { // ... "globalize": "npm:globalize/dist/globalize", "cldr": "npm:cldrjs/dist/cldr", "cldr-data": "npm:cldr-data", "json": "npm:systemjs-plugin-json/json.js", }, packages: { app: { // ... "globalize": { main: "../globalize.js", defaultExtension: "js" }, "cldr": { main: "../cldr.js", defaultExtension: "js" } } } });
Refer to the Using Globalize article for usage examples.
Alternatively, you can use Intl as a more lightweight localization solution.
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.
// ... 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:
<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:
ng serve
Open http://localhost:4200/ to browse the application.