WIP. remake Diagram demo for using standalone

Author: GoodDayForSurf

apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.html

@@ -3,7 +3,7 @@
   customShapeTemplate="customShapeTemplate"
   [readOnly]="true"
 >
-  <dxi-custom-shape
+  <dxi-diagram-custom-shape
     *ngFor="let emp of employees"
     [type]="'employee' + emp.ID"
     baseType="rectangle"
@@ -12,7 +12,7 @@
     [allowEditText]="false"
     [allowResize]="false"
   >
-  </dxi-custom-shape>
+  </dxi-diagram-custom-shape>
   <svg *dxTemplate="let item of 'customShapeTemplate'" class="template">
     <text class="template-name" x="50%" y="20%">
       {{ item.dataItem.Full_Name }}
@@ -29,14 +29,14 @@
       Show Details
     </text>
   </svg>
-  <dxo-nodes
+  <dxo-diagram-nodes
     [dataSource]="dataSource"
     keyExpr="ID"
     [typeExpr]="itemTypeExpr"
     parentKeyExpr="Head_ID"
   >
     <dxo-auto-layout type="tree"></dxo-auto-layout>
-  </dxo-nodes>
+  </dxo-diagram-nodes>
 </dx-diagram>
 
 <dx-popup

apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts

@@ -5,8 +5,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import {
-  DxPopupModule, DxTemplateModule, DxDiagramModule, DxDiagramComponent,
+  DxPopupComponent,
+  DxIntegrationModule,
+  DxTemplateModule,
 } from 'devextreme-angular';
+import {
+   DxDiagramComponent,
+   DxiDiagramCustomShapeComponent,
+   DxoDiagramNodesComponent,
+} from 'devextreme-angular/ui/diagram';
 import { ArrayStore } from 'devextreme-angular/common/data';
 import { Service, Employee } from './app.service';
 
@@ -57,8 +64,11 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    DxDiagramModule,
-    DxPopupModule,
+    DxDiagramComponent,
+    DxiDiagramCustomShapeComponent,
+    DxoDiagramNodesComponent,
+    DxPopupComponent,
+    DxIntegrationModule,
     DxTemplateModule,
   ],
   declarations: [AppComponent],