Angular Diagram - Add the Diagram Component to an Angular CLI Application

This tutorial adds the Diagram component to an Angular CLI Application. Refer to the Angular CLI documentation for information on how to create such an application.

Install the devextreme and devextreme-angular npm packages:

`npm install devextreme@21.1.4 devextreme-angular@21.1.4 --save --save-exact`

Open the angular.json file and reference the Diagram and a predefined theme stylesheet (dx.light.css in the code below):

angular.json
"styles": [
    ...
    "node_modules/devexpress-diagram/dist/dx-diagram.min.css",
    "node_modules/devextreme/dist/css/dx.light.css"
]

Go to the NgModule and import the Diagram module.

app.module.ts
// Imports the Diagram component
import { DxDiagramModule } from 'devextreme-angular'; 

@NgModule({ 
    // ... 
    imports: [
        // ...
        DxDiagramModule
    ] 
})

Now you can use the Diagram component in your application:

app.component.html
<dx-diagram></dx-diagram>

Run the application with the following command:

`ng serve`

Open http://localhost:4200/ to browse the application.