diff --git a/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts
index 03cfd66cc225..bc4175f7930d 100644
--- a/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -20,8 +20,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AjaxRequest/Angular/index.html b/apps/demos/Demos/Charts/AjaxRequest/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/AjaxRequest/Angular/index.html
+++ b/apps/demos/Demos/Charts/AjaxRequest/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.ts
index 896a6cb0b13c..c192f4319e6d 100644
--- a/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Annotation/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 import { Data, Service } from './app.service';
@@ -41,8 +41,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Annotation/Angular/index.html b/apps/demos/Demos/Charts/Annotation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Annotation/Angular/index.html
+++ b/apps/demos/Demos/Charts/Annotation/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Area/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Area/Angular/app/app.component.ts
index c48b314edf2e..85408b792b0b 100644
--- a/apps/demos/Demos/Charts/Area/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Area/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Population, Service } from './app.service';
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Area/Angular/index.html b/apps/demos/Demos/Charts/Area/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Area/Angular/index.html
+++ b/apps/demos/Demos/Charts/Area/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts
index 978dafe3c3ee..bdc56429450f 100644
--- a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartComponent, DxButtonModule } from 'devextreme-angular';
 import type { DxChartTypes } from 'devextreme-angular/ui/chart';
 
@@ -40,8 +40,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/index.html b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/index.html
+++ b/apps/demos/Demos/Charts/AreaSelectionZooming/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts
index ba938bf278b1..cdcd533e5c80 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSparklineModule } from 'devextreme-angular';
 import { CostInfo, Service } from './app.service';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AreaSparklines/Angular/index.html b/apps/demos/Demos/Charts/AreaSparklines/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/Angular/index.html
+++ b/apps/demos/Demos/Charts/AreaSparklines/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.ts
index 5dfc0582a77d..32343cc1c0ea 100644
--- a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 import { CountryInfo, Service } from './app.service';
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/index.html b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/index.html
+++ b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.ts
index 1054a0365dfd..710c92df3795 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxNumberBoxModule } from 'devextreme-angular';
 
 import { Service, ScatterData } from './app.service';
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/index.html b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/index.html
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.ts
index 554f636efbe3..9c7cad12357e 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 import { Data, Service } from './app.service';
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/index.html b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/index.html
index e84d5b268851..6dc11375e87b 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/index.html
@@ -22,7 +22,6 @@
         </defs>
       </svg>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.ts
index 740b793e3439..29a565790e28 100644
--- a/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 import { UserData, Service } from './app.service';
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/BarColorCustomization/Angular/index.html b/apps/demos/Demos/Charts/BarColorCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/BarColorCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/BarColorCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.ts b/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.ts
index 5b8652ab0427..8fde9141a881 100644
--- a/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxButtonModule } from 'devextreme-angular';
 
 import { Service, DataItem } from './app.service';
@@ -59,8 +59,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/BarDrillDown/Angular/index.html b/apps/demos/Demos/Charts/BarDrillDown/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/BarDrillDown/Angular/index.html
+++ b/apps/demos/Demos/Charts/BarDrillDown/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts b/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts
index 4d9e41ad075b..ffca578987a7 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 
@@ -48,7 +48,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/Charts/BarSparklines/Angular/index.html b/apps/demos/Demos/Charts/BarSparklines/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Angular/index.html
+++ b/apps/demos/Demos/Charts/BarSparklines/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.ts
index 381742fa21c5..bdd29d543af5 100644
--- a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Population, Service } from './app.service';
 
@@ -30,8 +30,4 @@ export class AppComponent {
   customizeLabel: DxChartTypes.ValueAxisLabel['customizeText'] = ({ value }) => `${Math.abs(value as number)}%`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/index.html b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.ts
index af096fdf499c..2f33cc679f09 100644
--- a/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Bubble/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Population, CorrelationDescription, Service } from './app.service';
 
@@ -45,8 +45,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Bubble/Angular/index.html b/apps/demos/Demos/Charts/Bubble/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Bubble/Angular/index.html
+++ b/apps/demos/Demos/Charts/Bubble/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.ts
index 9173ac08cfea..7022dfdb8ab2 100644
--- a/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Candlestick/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 
 import { StockPrice, Service } from './app.service';
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Candlestick/Angular/index.html b/apps/demos/Demos/Charts/Candlestick/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Candlestick/Angular/index.html
+++ b/apps/demos/Demos/Charts/Candlestick/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.ts
index 4723e6c594a7..f086e71d23c9 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { DecimalPipe } from '@angular/common';
 import { Service } from './app.service';
@@ -44,8 +44,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/index.html b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts
index b5ef7e94d3cc..32009a1e39cf 100644
--- a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts
@@ -1,7 +1,6 @@
 import {
   Component,
   enableProdMode,
-  provideZoneChangeDetection,
   inject,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -65,7 +64,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/index.html b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/index.html
+++ b/apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.ts
index 0f6e83ab440f..e61f85d20d13 100644
--- a/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxTreeMapModule, DxTreeMapTypes } from 'devextreme-angular/ui/tree-map';
 import { SalesAmount, Service } from './app.service';
@@ -83,8 +83,4 @@ export class AppComponent {
   );
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Colorization/Angular/index.html b/apps/demos/Demos/Charts/Colorization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Colorization/Angular/index.html
+++ b/apps/demos/Demos/Charts/Colorization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.ts
index b608f3c185f3..eb3c93986122 100644
--- a/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ContinuousData/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule } from 'devextreme-angular';
 
 import { Coordinate, Service } from './app.service';
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ContinuousData/Angular/index.html b/apps/demos/Demos/Charts/ContinuousData/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ContinuousData/Angular/index.html
+++ b/apps/demos/Demos/Charts/ContinuousData/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.ts
index 6b88df11d880..0dc29354ce8a 100644
--- a/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Crosshair/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, CountryInfo, EnergyDescription } from './app.service';
 
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Crosshair/Angular/index.html b/apps/demos/Demos/Charts/Crosshair/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Crosshair/Angular/index.html
+++ b/apps/demos/Demos/Charts/Crosshair/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.ts b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.ts
index 92e585dba698..82cf239641d0 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, State } from './app.service';
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/Angular/index.html b/apps/demos/Demos/Charts/CustomAnnotations/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/Angular/index.html
+++ b/apps/demos/Demos/Charts/CustomAnnotations/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.ts b/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.ts
index 9f84909bf27e..860f80cb0549 100644
--- a/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/CustomBarWidth/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { OilProduction, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/CustomBarWidth/Angular/index.html b/apps/demos/Demos/Charts/CustomBarWidth/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/CustomBarWidth/Angular/index.html
+++ b/apps/demos/Demos/Charts/CustomBarWidth/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.ts b/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.ts
index 5135e6239883..d3f6e9f38b69 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/CustomFillStyles/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { registerGradient, registerPattern } from 'devextreme/common/charts';
 import { Data, Service } from './app.service';
@@ -139,8 +139,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/CustomFillStyles/Angular/index.html b/apps/demos/Demos/Charts/CustomFillStyles/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/CustomFillStyles/Angular/index.html
+++ b/apps/demos/Demos/Charts/CustomFillStyles/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.ts b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.ts
index 1699c7738c51..e445dd65c858 100644
--- a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, Temperature } from './app.service';
 
@@ -51,8 +51,4 @@ export class AppComponent {
   customizeText: DxChartTypes.ValueAxisLabel['customizeText'] = ({ valueText }) => `${valueText}&#176F`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/index.html b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/index.html
+++ b/apps/demos/Demos/Charts/CustomizePointsAndLabels/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.ts
index ec8809fcaa4e..a44558c5bcbe 100644
--- a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxRangeSelectorModule } from 'devextreme-angular';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, ChemicalComposition, SeriesDescription } from './app.service';
@@ -31,8 +31,4 @@ export class AppComponent {
   customizeText: DxChartTypes.ValueAxisLabel['customizeText'] = ({ valueText }) => `${valueText}%`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/index.html b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/index.html
+++ b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.ts
index 183db672859f..e289606e8d00 100644
--- a/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DiscreteData/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Temperature, Service } from './app.service';
 
@@ -27,8 +27,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DiscreteData/Angular/index.html b/apps/demos/Demos/Charts/DiscreteData/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DiscreteData/Angular/index.html
+++ b/apps/demos/Demos/Charts/DiscreteData/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.ts
index 860ae49256ce..2393fbc83acb 100644
--- a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, OilProductionItem } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/index.html b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/index.html
+++ b/apps/demos/Demos/Charts/DiscretePointsAggregation/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.ts
index f1bf46c17120..927c003d2ea3 100644
--- a/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Doughnut/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { PercentPipe } from '@angular/common';
 import { PopulationByRegion, Service } from './app.service';
@@ -32,8 +32,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Doughnut/Angular/index.html b/apps/demos/Demos/Charts/Doughnut/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Doughnut/Angular/index.html
+++ b/apps/demos/Demos/Charts/Doughnut/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.ts
index 95886b8b158b..7bb8e4ee7b0d 100644
--- a/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DoughnutSelection/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { MedalsInfo, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DoughnutSelection/Angular/index.html b/apps/demos/Demos/Charts/DoughnutSelection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DoughnutSelection/Angular/index.html
+++ b/apps/demos/Demos/Charts/DoughnutSelection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.ts
index a80a205b082c..2ec8ec581b2b 100644
--- a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { LanguageData, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/index.html b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/index.html
+++ b/apps/demos/Demos/Charts/DoughnutWithTopNSeries/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.ts
index 56ada65b33b8..06fb26377fbf 100644
--- a/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeMapModule } from 'devextreme-angular';
 import { CitiesPopulation, Service } from './app.service';
 
@@ -56,8 +56,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DrillDown/Angular/index.html b/apps/demos/Demos/Charts/DrillDown/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DrillDown/Angular/index.html
+++ b/apps/demos/Demos/Charts/DrillDown/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.ts b/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.ts
index cb712a5ac44c..b87565e3678c 100644
--- a/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/DynamicSeries/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, Production } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/DynamicSeries/Angular/index.html b/apps/demos/Demos/Charts/DynamicSeries/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/DynamicSeries/Angular/index.html
+++ b/apps/demos/Demos/Charts/DynamicSeries/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.ts b/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.ts
index af2188d1f228..7a1a5a351891 100644
--- a/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/EqualSizePies/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { PieOptions, Service } from './app.service';
 
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/EqualSizePies/Angular/index.html b/apps/demos/Demos/Charts/EqualSizePies/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/EqualSizePies/Angular/index.html
+++ b/apps/demos/Demos/Charts/EqualSizePies/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.ts
index d1f3a939a656..e787d61206ee 100644
--- a/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ErrorBars/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, Weather } from './app.service';
 
@@ -32,8 +32,4 @@ export class AppComponent {
   );
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ErrorBars/Angular/index.html b/apps/demos/Demos/Charts/ErrorBars/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ErrorBars/Angular/index.html
+++ b/apps/demos/Demos/Charts/ErrorBars/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.ts
index 87efe2c02bec..d01418dd2ae1 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxButtonModule } from 'devextreme-angular';
 import { DxChartComponent, DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, Mountain } from './app.service';
@@ -46,8 +46,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/index.html b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/index.html
+++ b/apps/demos/Demos/Charts/ExportAndPrintingAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
index c1a598915e9d..5e693252778a 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartComponent, DxButtonModule } from 'devextreme-angular';
 import { exportFromMarkup } from 'devextreme/viz/export';
 import { Canvg } from 'canvg';
@@ -85,8 +85,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/index.html b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/index.html
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.ts
index b1e3d48e8e70..f9d813382e8c 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import {
   DxChartModule, DxPieChartModule, DxChartComponent, DxPieChartComponent, DxButtonModule,
 } from 'devextreme-angular';
@@ -48,8 +48,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/index.html b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/index.html
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/FlatDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/Charts/FlatDataStructure/Angular/app/app.component.ts
index 7da8509d9750..db1ac44e35db 100644
--- a/apps/demos/Demos/Charts/FlatDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/FlatDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeMapModule } from 'devextreme-angular';
 import { CitiesPopulation, Service } from './app.service';
 
@@ -38,8 +38,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/FlatDataStructure/Angular/index.html b/apps/demos/Demos/Charts/FlatDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/FlatDataStructure/Angular/index.html
+++ b/apps/demos/Demos/Charts/FlatDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.ts
index 3d7e28565693..dc50f6cc22af 100644
--- a/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/FullStackedBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { CountryInfo, Service } from './app.service';
 
@@ -30,8 +30,4 @@ export class AppComponent {
   );
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/FullStackedBar/Angular/index.html b/apps/demos/Demos/Charts/FullStackedBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/FullStackedBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/FullStackedBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.ts
index af130d9a275f..bc2210da4eae 100644
--- a/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/FunnelChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxFunnelModule } from 'devextreme-angular';
 import { itemInfo, Service } from './app.service';
 
@@ -26,8 +26,4 @@ export class AppComponent {
   customizeText = ({ percentText, item: { argument } }) => `<span style='font-size: 28px'>${percentText}</span><br/>${argument}`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/FunnelChart/Angular/index.html b/apps/demos/Demos/Charts/FunnelChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/FunnelChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/FunnelChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/app/app.component.ts b/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/app/app.component.ts
index 7da8509d9750..db1ac44e35db 100644
--- a/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxTreeMapModule } from 'devextreme-angular';
 import { CitiesPopulation, Service } from './app.service';
 
@@ -38,8 +38,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/index.html b/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/index.html
+++ b/apps/demos/Demos/Charts/HierarchicalDataStructure/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.ts b/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.ts
index e9a7a1c8d8f8..62d241ef3402 100644
--- a/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/HoverMode/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, GrossProduct } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/HoverMode/Angular/index.html b/apps/demos/Demos/Charts/HoverMode/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/HoverMode/Angular/index.html
+++ b/apps/demos/Demos/Charts/HoverMode/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.ts
index 160294432ce0..546e5803807f 100644
--- a/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/InvertedChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule } from 'devextreme-angular';
 import { Coordinate, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/InvertedChart/Angular/index.html b/apps/demos/Demos/Charts/InvertedChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/InvertedChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/InvertedChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.ts
index 8cc303ca4c74..58ac0fc4fce5 100644
--- a/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/LabelCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { MedalsInfo, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/LabelCustomization/Angular/index.html b/apps/demos/Demos/Charts/LabelCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/LabelCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/LabelCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.ts
index 9a3b43a8fbc3..f3d9e27a305b 100644
--- a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { DxChartModule } from 'devextreme-angular';
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/index.html b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/LegendMarkersCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Line/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Line/Angular/app/app.component.ts
index 305933de1a06..e4277b2cc74d 100644
--- a/apps/demos/Demos/Charts/Line/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Line/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { CountryInfo, EnergyDescription, Service } from './app.service';
 
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Line/Angular/index.html b/apps/demos/Demos/Charts/Line/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Line/Angular/index.html
+++ b/apps/demos/Demos/Charts/Line/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.ts b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.ts
index 519493da5bda..cb15f08205c5 100644
--- a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxChartComponent, DxChartModule } from 'devextreme-angular';
@@ -121,7 +121,6 @@ export class AppComponent {
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(withFetch()),
   ],
 });
diff --git a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/index.html b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/index.html
+++ b/apps/demos/Demos/Charts/LoadDataOnDemand/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.ts b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.ts
index a184db11f30b..db643fb561a8 100644
--- a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, RelativeMass } from './app.service';
 
@@ -36,8 +36,4 @@ export class AppComponent {
     }[type]);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/index.html b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/LogarithmicAxis/Angular/index.html
+++ b/apps/demos/Demos/Charts/LogarithmicAxis/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.ts b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.ts
index 6021dbb4ed79..85b768a7b163 100644
--- a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Data, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/index.html b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/index.html
+++ b/apps/demos/Demos/Charts/LogarithmicVsLinearAxes/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.ts b/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.ts
index 75318b0723f5..3adaa5116ec6 100644
--- a/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/MultipleAxes/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, Population } from './app.service';
 
@@ -43,8 +43,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/MultipleAxes/Angular/index.html b/apps/demos/Demos/Charts/MultipleAxes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/MultipleAxes/Angular/index.html
+++ b/apps/demos/Demos/Charts/MultipleAxes/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.ts b/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.ts
index 6e34df04fda2..a9eda5b0ece5 100644
--- a/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/MultiplePanes/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, Weather } from './app.service';
 
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/MultiplePanes/Angular/index.html b/apps/demos/Demos/Charts/MultiplePanes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/MultiplePanes/Angular/index.html
+++ b/apps/demos/Demos/Charts/MultiplePanes/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.ts b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.ts
index 298131524832..1e689d8dd2ad 100644
--- a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, MedalsInfo } from './app.service';
 
@@ -32,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/index.html b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/MultiplePointSelection/Angular/index.html
+++ b/apps/demos/Demos/Charts/MultiplePointSelection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.ts b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.ts
index 63674ed0f97d..a159b2b17fd3 100644
--- a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, Statistics } from './app.service';
 
@@ -32,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/index.html b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/index.html
+++ b/apps/demos/Demos/Charts/MultipleSeriesSelection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.ts b/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.ts
index a2b4ed16ad13..1514bf047dcf 100644
--- a/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/NullPointSupport/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, MedalsInfo } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/NullPointSupport/Angular/index.html b/apps/demos/Demos/Charts/NullPointSupport/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/NullPointSupport/Angular/index.html
+++ b/apps/demos/Demos/Charts/NullPointSupport/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.ts
index 8ffacbba038c..ff21ca2d5f45 100644
--- a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, ComplaintsWithPercent } from './app.service';
 
@@ -40,8 +40,4 @@ export class AppComponent {
   customizeLabelText: DxChartTypes.ValueAxisLabel['customizeText'] = ({ valueText }) => `${valueText}%`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Overview/Angular/index.html b/apps/demos/Demos/Charts/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Overview/Angular/index.html
+++ b/apps/demos/Demos/Charts/Overview/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.ts
index 1341d74c7e8e..ea5a62dec801 100644
--- a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { getPalette } from 'devextreme/viz/palette';
 import { DxPieChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Palette, PaletteExtensionMode } from 'devextreme-angular/common/charts';
@@ -44,8 +44,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Palette/Angular/index.html b/apps/demos/Demos/Charts/Palette/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Palette/Angular/index.html
+++ b/apps/demos/Demos/Charts/Palette/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.ts
index 47d69e6ba4fe..c0fa5cf32af9 100644
--- a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, ComplaintsWithPercent } from './app.service';
 
@@ -40,8 +40,4 @@ export class AppComponent {
   customizeLabelText = ({ valueText }) => `${valueText}%`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ParetoChart/Angular/index.html b/apps/demos/Demos/Charts/ParetoChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ParetoChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/ParetoChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.ts
index 160294432ce0..546e5803807f 100644
--- a/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PeriodicData/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule } from 'devextreme-angular';
 import { Coordinate, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PeriodicData/Angular/index.html b/apps/demos/Demos/Charts/PeriodicData/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PeriodicData/Angular/index.html
+++ b/apps/demos/Demos/Charts/PeriodicData/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Pie/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Pie/Angular/app/app.component.ts
index 3e84daa1e43c..2bb0e649561a 100644
--- a/apps/demos/Demos/Charts/Pie/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Pie/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { Area, Service } from './app.service';
 
@@ -44,8 +44,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Pie/Angular/index.html b/apps/demos/Demos/Charts/Pie/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Pie/Angular/index.html
+++ b/apps/demos/Demos/Charts/Pie/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.ts
index f84fe21f1ccb..0235ae085a3d 100644
--- a/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PieAnnotations/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { MedalistData, AnnotationInfo, Service } from './app.service';
 
@@ -28,8 +28,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PieAnnotations/Angular/index.html b/apps/demos/Demos/Charts/PieAnnotations/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PieAnnotations/Angular/index.html
+++ b/apps/demos/Demos/Charts/PieAnnotations/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.ts
index c1b0a11a36c2..da053fff157a 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { MedalsInfo, Service } from './app.service';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/index.html b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/index.html
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.ts
index 8ce2eab99dd6..46144ad3c3bb 100644
--- a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { ExportImportEntry, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/index.html b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/index.html
+++ b/apps/demos/Demos/Charts/PieWithMultipleSeries/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.ts
index 1d2f13b70efd..7908ef2dbdd1 100644
--- a/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PointImage/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, IceHockeyStatistics } from './app.service';
 
@@ -45,8 +45,4 @@ export class AppComponent {
   }[valueText] || `${valueText}th place`);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PointImage/Angular/index.html b/apps/demos/Demos/Charts/PointImage/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PointImage/Angular/index.html
+++ b/apps/demos/Demos/Charts/PointImage/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.ts
index 048b7563671c..9228dda97915 100644
--- a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, type DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, CatBreed } from './app.service';
 
@@ -37,8 +37,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/index.html b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PointSelectionAPI/Angular/index.html
+++ b/apps/demos/Demos/Charts/PointSelectionAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.ts
index a24051f64cfc..68f2c4590868 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { enableProdMode, Component, provideZoneChangeDetection } from '@angular/core';
+import { enableProdMode, Component } from '@angular/core';
 import { DxChartModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
 import {
   Service, WeatherIndicators, AggregationInterval, AggregationFunction,
@@ -94,8 +94,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PointsAggregation/Angular/index.html b/apps/demos/Demos/Charts/PointsAggregation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/Angular/index.html
+++ b/apps/demos/Demos/Charts/PointsAggregation/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.ts
index 686a213f0d5a..d3d008803aac 100644
--- a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxRangeSelectorModule } from 'devextreme-angular';
 import { VisualRange } from 'devextreme-angular/common/charts';
 import { DxChartModule, DxChartComponent } from 'devextreme-angular/ui/chart';
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/index.html b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.ts
index d6986da03046..78b3abb89b1a 100644
--- a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule } from 'devextreme-angular';
 import { Temperature, Service } from './app.service';
 
@@ -30,8 +30,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/index.html b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/index.html
+++ b/apps/demos/Demos/Charts/PolarChartAnnotations/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.ts
index 6275839f23dc..7b8a7c6ab4a4 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxRangeSelectorModule } from 'devextreme-angular';
 import { DxPolarChartModule, DxPolarChartTypes } from 'devextreme-angular/ui/polar-chart';
 import { DataFrame, Service } from './app.service';
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/index.html b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/index.html
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.ts
index 737038f0c68b..0f21976c49f6 100644
--- a/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/PyramidChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxFunnelModule } from 'devextreme-angular';
 import { Data, Service } from './app.service';
 
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/PyramidChart/Angular/index.html b/apps/demos/Demos/Charts/PyramidChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/PyramidChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/PyramidChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.ts b/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.ts
index 61363c169ad1..b7c2f50a0fa9 100644
--- a/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/RangeArea/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { InflationEntry, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/RangeArea/Angular/index.html b/apps/demos/Demos/Charts/RangeArea/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/RangeArea/Angular/index.html
+++ b/apps/demos/Demos/Charts/RangeArea/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.ts
index 475edabaa066..b6a20d88770d 100644
--- a/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/RangeBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { OilPrice, Service } from './app.service';
 
@@ -25,8 +25,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/RangeBar/Angular/index.html b/apps/demos/Demos/Charts/RangeBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/RangeBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/RangeBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.ts
index 8f5ba2fcbb15..b95fbf3c9566 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Service, PopulationData } from './app.service';
 
@@ -32,8 +32,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/index.html b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/index.html
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.ts
index 51374ae4edcd..168fcb5f5213 100644
--- a/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SankeyChart/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSankeyModule, DxSankeyTypes } from 'devextreme-angular/ui/sankey';
 import { Service, DataItem } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
     }
   );
 }
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SankeyChart/Angular/index.html b/apps/demos/Demos/Charts/SankeyChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SankeyChart/Angular/index.html
+++ b/apps/demos/Demos/Charts/SankeyChart/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.ts
index 3a77589ffb2d..88e7278f1f8e 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
 import { SolarSystemObject, Service } from './app.service';
 
@@ -41,8 +41,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/Angular/index.html b/apps/demos/Demos/Charts/ScaleBreaks/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/Angular/index.html
+++ b/apps/demos/Demos/Charts/ScaleBreaks/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.ts
index 687bab0f33ee..baaa303bb062 100644
--- a/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Scatter/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { ScatterData, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Scatter/Angular/index.html b/apps/demos/Demos/Charts/Scatter/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Scatter/Angular/index.html
+++ b/apps/demos/Demos/Charts/Scatter/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Selection/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Selection/Angular/app/app.component.ts
index 4a16ee3703e6..08f4e1e86a03 100644
--- a/apps/demos/Demos/Charts/Selection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Selection/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, ExportData } from './app.service';
 
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Selection/Angular/index.html b/apps/demos/Demos/Charts/Selection/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Selection/Angular/index.html
+++ b/apps/demos/Demos/Charts/Selection/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.ts
index b1ab5dbe7c8d..7295409cdfa4 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { DataSource } from 'devextreme-angular/common/data';
 import { Month, Service } from './app.service';
@@ -87,8 +87,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/index.html b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/index.html
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.ts
index c2deaf6d4b63..c53075a4b9c4 100644
--- a/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SideBySideBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { GrossProduct, Service } from './app.service';
 
@@ -28,8 +28,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SideBySideBar/Angular/index.html b/apps/demos/Demos/Charts/SideBySideBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SideBySideBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/SideBySideBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.ts
index ae2fa597c49e..048fd2138c63 100644
--- a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import type { DxChartTypes } from 'devextreme-angular/ui/chart';
 import { DxChartModule } from 'devextreme-angular';
 import { Population, Service } from './app.service';
@@ -31,8 +31,4 @@ export class AppComponent {
   );
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/index.html b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.ts
index 737981149087..417edac16434 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Population, Service } from './app.service';
 
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/index.html b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/SideBySideStackedBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.ts
index c0abc9a58688..feea0e668855 100644
--- a/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SignalRService/Angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
-  ChangeDetectorRef, Component, ViewChild, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectorRef, Component, ViewChild, enableProdMode,
 } from '@angular/core';
 import { DecimalPipe, CurrencyPipe } from '@angular/common';
 import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr';
@@ -91,8 +91,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SignalRService/Angular/index.html b/apps/demos/Demos/Charts/SignalRService/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SignalRService/Angular/index.html
+++ b/apps/demos/Demos/Charts/SignalRService/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.ts
index 18bc13a036f9..0ee7265267b9 100644
--- a/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SimpleArray/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Population, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SimpleArray/Angular/index.html b/apps/demos/Demos/Charts/SimpleArray/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SimpleArray/Angular/index.html
+++ b/apps/demos/Demos/Charts/SimpleArray/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.ts
index 684eac2b697b..83e8419ff7a3 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxBulletModule } from 'devextreme-angular';
 import { Week, Service } from './app.service';
 
@@ -31,8 +31,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SimpleBullets/Angular/index.html b/apps/demos/Demos/Charts/SimpleBullets/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/Angular/index.html
+++ b/apps/demos/Demos/Charts/SimpleBullets/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.ts
index 5503f76e1a04..b2a0e09cc3b2 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSparklineModule } from 'devextreme-angular';
 import { CostInfo, Service } from './app.service';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Angular/index.html b/apps/demos/Demos/Charts/SimpleSparklines/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Angular/index.html
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.ts
index a80a205b082c..2ec8ec581b2b 100644
--- a/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SmallValueGroups/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPieChartModule } from 'devextreme-angular';
 import { LanguageData, Service } from './app.service';
 
@@ -29,8 +29,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SmallValueGroups/Angular/index.html b/apps/demos/Demos/Charts/SmallValueGroups/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SmallValueGroups/Angular/index.html
+++ b/apps/demos/Demos/Charts/SmallValueGroups/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.ts
index 995aaa723228..0a10dec6aa0b 100644
--- a/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SpiderWeb/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxPolarChartModule } from 'devextreme-angular';
 import { Production, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SpiderWeb/Angular/index.html b/apps/demos/Demos/Charts/SpiderWeb/Angular/index.html
index 0eba71e12649..ba48d97a9cb6 100644
--- a/apps/demos/Demos/Charts/SpiderWeb/Angular/index.html
+++ b/apps/demos/Demos/Charts/SpiderWeb/Angular/index.html
@@ -12,7 +12,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.ts
index 2994dada5544..6f97da79e79b 100644
--- a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { ArchitectureInfo, Service } from './app.service';
 
@@ -28,8 +28,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Spline/Angular/index.html b/apps/demos/Demos/Charts/Spline/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Spline/Angular/index.html
+++ b/apps/demos/Demos/Charts/Spline/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.ts b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.ts
index 97f90d650107..ecc43756e618 100644
--- a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
 import { CorporationInfo, Service } from './app.service';
 
@@ -28,8 +28,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/SplineArea/Angular/index.html b/apps/demos/Demos/Charts/SplineArea/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/SplineArea/Angular/index.html
+++ b/apps/demos/Demos/Charts/SplineArea/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.ts
index 5770d444097f..0ece6bab29e7 100644
--- a/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/StackedBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { MaleAgeStructure, Service } from './app.service';
 
@@ -28,8 +28,4 @@ export class AppComponent {
   });
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/StackedBar/Angular/index.html b/apps/demos/Demos/Charts/StackedBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/StackedBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/StackedBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.ts b/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.ts
index 6021dbb4ed79..85b768a7b163 100644
--- a/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/StandardBar/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Data, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/StandardBar/Angular/index.html b/apps/demos/Demos/Charts/StandardBar/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/StandardBar/Angular/index.html
+++ b/apps/demos/Demos/Charts/StandardBar/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.ts b/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.ts
index ab738d6b2dc2..bcfd61197840 100644
--- a/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/StepArea/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { MedalsInfo, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/StepArea/Angular/index.html b/apps/demos/Demos/Charts/StepArea/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/StepArea/Angular/index.html
+++ b/apps/demos/Demos/Charts/StepArea/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.ts b/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.ts
index 8269b8e11387..3c2e3940688c 100644
--- a/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/StepLine/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { MedalInfo, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/StepLine/Angular/index.html b/apps/demos/Demos/Charts/StepLine/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/StepLine/Angular/index.html
+++ b/apps/demos/Demos/Charts/StepLine/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
index 712c237092d3..984d392a2677 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Stock/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { StockPrice, Service } from './app.service';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Stock/Angular/index.html b/apps/demos/Demos/Charts/Stock/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Stock/Angular/index.html
+++ b/apps/demos/Demos/Charts/Stock/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Strips/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Strips/Angular/app/app.component.ts
index 895ccce5b81f..dd20bca8438e 100644
--- a/apps/demos/Demos/Charts/Strips/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Strips/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, Temperature } from './app.service';
 
@@ -65,8 +65,4 @@ function getLabelsSettings(backgroundColor: string) {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Strips/Angular/index.html b/apps/demos/Demos/Charts/Strips/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Strips/Angular/index.html
+++ b/apps/demos/Demos/Charts/Strips/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts
index a0731ae7e969..1240e0f7dff6 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTreeMapModule, DxSelectBoxModule } from 'devextreme-angular';
 import { PopulationByAge, Service } from './app.service';
@@ -66,8 +66,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/index.html b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/index.html
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.ts b/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.ts
index 6021dbb4ed79..85b768a7b163 100644
--- a/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/Timeline/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Data, Service } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/Timeline/Angular/index.html b/apps/demos/Demos/Charts/Timeline/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/Timeline/Angular/index.html
+++ b/apps/demos/Demos/Charts/Timeline/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.ts b/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.ts
index 273a79d88eb6..8e91d6d05faf 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/TooltipAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, ViewChild, enableProdMode } from '@angular/core';
 import { DxPieChartModule, DxPieChartComponent, DxPieChartTypes } from 'devextreme-angular/ui/pie-chart';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import { Service, Population } from './app.service';
@@ -45,8 +45,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/TooltipAPI/Angular/index.html b/apps/demos/Demos/Charts/TooltipAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/TooltipAPI/Angular/index.html
+++ b/apps/demos/Demos/Charts/TooltipAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.ts
index a6a6dd2a169b..e7b4e568927d 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 import { DxPieChartModule } from 'devextreme-angular';
 import { Service, State } from './app.service';
@@ -28,8 +28,4 @@ export class AppComponent {
   getImagePath = ({ data: { name } }) => `../../../../images/flags/${name.replace(/\s/, '')}.svg`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/Angular/index.html b/apps/demos/Demos/Charts/TooltipCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/Angular/index.html
+++ b/apps/demos/Demos/Charts/TooltipCustomization/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.ts b/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.ts
index 43e2aa756d2d..6c6872438b1d 100644
--- a/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/WindRose/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxPolarChartModule, DxPolarChartTypes } from 'devextreme-angular/ui/polar-chart';
 import { WindRose, WindDescription, Service } from './app.service';
@@ -35,8 +35,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/WindRose/Angular/index.html b/apps/demos/Demos/Charts/WindRose/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/WindRose/Angular/index.html
+++ b/apps/demos/Demos/Charts/WindRose/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.ts b/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.ts
index ba938bf278b1..cdcd533e5c80 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxSparklineModule } from 'devextreme-angular';
 import { CostInfo, Service } from './app.service';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/Angular/index.html b/apps/demos/Demos/Charts/WinlossSparklines/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Angular/index.html
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.ts
index 9d4af0829718..d1f7ab05831d 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxChartModule } from 'devextreme-angular';
 import { Service, ZoomingData } from './app.service';
 
@@ -24,8 +24,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/index.html b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/index.html
+++ b/apps/demos/Demos/Charts/ZoomingAndScrolling/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.ts
index 570c5f66c81b..9ea6389f5400 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode } from '@angular/core';
 import { DxRangeSelectorModule } from 'devextreme-angular';
 import { VisualRange } from 'devextreme-angular/common/charts';
 import { DxChartModule } from 'devextreme-angular/ui/chart';
@@ -28,8 +28,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/index.html b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/index.html
+++ b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/Angular/index.html
@@ -11,7 +11,6 @@
     <div class="demo-container">
       <demo-app>Loading...</demo-app>
     </div>
-    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
     <script src="./bundle.js" type="module"></script>
   </body>
 </html>
diff --git a/packages/devextreme-angular/.gitignore b/packages/devextreme-angular/.gitignore
index 850a120dc4da..741d02ab23c6 100644
--- a/packages/devextreme-angular/.gitignore
+++ b/packages/devextreme-angular/.gitignore
@@ -1 +1,2 @@
 metadata
+Chrome_Headless**
diff --git a/packages/devextreme-angular/eslint.config.mjs b/packages/devextreme-angular/eslint.config.mjs
index f2d90d5ea364..2ba5886a93c4 100644
--- a/packages/devextreme-angular/eslint.config.mjs
+++ b/packages/devextreme-angular/eslint.config.mjs
@@ -60,7 +60,7 @@ export default [
     rules: {
       'import/no-cycle': 'warn',
       'no-param-reassign': 'warn',
-      'no-underscore-dangle': 'warn',
+      'no-underscore-dangle': 'off',
       'spellcheck/spell-checker': [1, {
         lang: 'en_US',
         comments: false,
diff --git a/packages/devextreme-angular/karma.common.test.shim.js b/packages/devextreme-angular/karma.common.test.shim.js
index ffd110f4e6c1..2f96a619113f 100644
--- a/packages/devextreme-angular/karma.common.test.shim.js
+++ b/packages/devextreme-angular/karma.common.test.shim.js
@@ -4,7 +4,4 @@ require('core-js/es6');
 require('core-js/client/shim.min');
 require('reflect-metadata');
 
-require('zone.js');
-require('zone.js/testing');
-
 __karma__.loaded = function () {};
diff --git a/packages/devextreme-angular/karma.hydration.test.shim.js b/packages/devextreme-angular/karma.hydration.test.shim.js
index c080d3380edd..26bfa44dd8b9 100644
--- a/packages/devextreme-angular/karma.hydration.test.shim.js
+++ b/packages/devextreme-angular/karma.hydration.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');
diff --git a/packages/devextreme-angular/karma.server.test.shim.js b/packages/devextreme-angular/karma.server.test.shim.js
index 2ec94db2445b..e9610a09f967 100644
--- a/packages/devextreme-angular/karma.server.test.shim.js
+++ b/packages/devextreme-angular/karma.server.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const server = require('@angular/platform-server/testing');
diff --git a/packages/devextreme-angular/karma.test.shim.js b/packages/devextreme-angular/karma.test.shim.js
index 3b727b730463..a583013927d8 100644
--- a/packages/devextreme-angular/karma.test.shim.js
+++ b/packages/devextreme-angular/karma.test.shim.js
@@ -1,4 +1,4 @@
-require('./karma.common.test.shim');
+require('./karma.zone-polyfills.test.shim');
 
 const testing = require('@angular/core/testing');
 const browser = require('@angular/platform-browser-dynamic/testing');
@@ -9,6 +9,6 @@ testing.TestBed.initTestEnvironment(
   browser.platformBrowserDynamicTesting(),
 );
 
-const context = require.context('./tests/dist', true, /^.\/(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
+const context = require.context('./tests/dist', true, /^.\/(?!zone-modes\/)(?!.*\/(ssr-components|hydration)\.spec\.js$).*\.spec\.js$/);
 context.keys().map(context);
 __karma__.start();
diff --git a/packages/devextreme-angular/karma.zone-polyfills.test.shim.js b/packages/devextreme-angular/karma.zone-polyfills.test.shim.js
new file mode 100644
index 000000000000..a8df54b53b99
--- /dev/null
+++ b/packages/devextreme-angular/karma.zone-polyfills.test.shim.js
@@ -0,0 +1,4 @@
+require('./karma.common.test.shim');
+
+require('zone.js');
+require('zone.js/testing');
diff --git a/packages/devextreme-angular/karma.zone.test.shim.js b/packages/devextreme-angular/karma.zone.test.shim.js
new file mode 100644
index 000000000000..aa5fc82b6aed
--- /dev/null
+++ b/packages/devextreme-angular/karma.zone.test.shim.js
@@ -0,0 +1,14 @@
+require('./karma.zone-polyfills.test.shim');
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZoneTestingModule } = require('./karma.zone-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZoneTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();
diff --git a/packages/devextreme-angular/karma.zoneless-testing.module.js b/packages/devextreme-angular/karma.zoneless-testing.module.js
new file mode 100644
index 000000000000..f9d360dbc3dc
--- /dev/null
+++ b/packages/devextreme-angular/karma.zoneless-testing.module.js
@@ -0,0 +1,7 @@
+const { NgModule, provideZonelessChangeDetection } = require('@angular/core');
+
+const ZonelessTestingModule = NgModule({
+  providers: [provideZonelessChangeDetection()],
+})(class ZonelessTestingModule {});
+
+module.exports = { ZonelessTestingModule };
diff --git a/packages/devextreme-angular/karma.zoneless.test.shim.js b/packages/devextreme-angular/karma.zoneless.test.shim.js
new file mode 100644
index 000000000000..d21ce6813ccf
--- /dev/null
+++ b/packages/devextreme-angular/karma.zoneless.test.shim.js
@@ -0,0 +1,18 @@
+require('./karma.common.test.shim');
+
+if (typeof Zone !== 'undefined') {
+  throw new Error('zone.js is loaded in the zoneless test environment');
+}
+
+const testing = require('@angular/core/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
+const { ZonelessTestingModule } = require('./karma.zoneless-testing.module');
+
+testing.TestBed.initTestEnvironment(
+  [browser.BrowserDynamicTestingModule, ZonelessTestingModule],
+  browser.platformBrowserDynamicTesting(),
+);
+
+const context = require.context('./tests/dist/zone-modes', true, /\.spec\.js$/);
+context.keys().map(context);
+__karma__.start();
diff --git a/packages/devextreme-angular/project.json b/packages/devextreme-angular/project.json
index 3144fe8c6145..784d82cbfc1c 100644
--- a/packages/devextreme-angular/project.json
+++ b/packages/devextreme-angular/project.json
@@ -350,7 +350,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -428,6 +430,50 @@
         "{projectRoot}/tests/dist/**/*"
       ]
     },
+    "test:components-zone-modes": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone",
+          "zoneless"
+        ]
+      },
+      "dependsOn": [
+        "build:tests"
+      ],
+      "inputs": [
+        "default",
+        "test",
+        "{projectRoot}/tests/dist/**/*"
+      ]
+    },
+    "test:components-zone-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zone"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
+    "test:components-zoneless-debug": {
+      "executor": "devextreme-nx-infra-plugin:karma-multi-env",
+      "options": {
+        "karmaConfig": "karma.conf.js",
+        "environments": [
+          "zoneless"
+        ],
+        "debug": true
+      },
+      "dependsOn": [
+        "build:tests"
+      ]
+    },
     "watch:test": {
       "executor": "devextreme-nx-infra-plugin:karma-multi-env",
       "options": {
@@ -453,7 +499,9 @@
         "environments": [
           "client",
           "server",
-          "hydration"
+          "hydration",
+          "zone",
+          "zoneless"
         ]
       },
       "dependsOn": [
@@ -498,7 +546,12 @@
       "{projectRoot}/karma.test.shim.js",
       "{projectRoot}/karma.server.test.shim.js",
       "{projectRoot}/karma.hydration.test.shim.js",
+      "{projectRoot}/karma.common.test.shim.js",
+      "{projectRoot}/karma.zone-polyfills.test.shim.js",
+      "{projectRoot}/karma.zone.test.shim.js",
+      "{projectRoot}/karma.zoneless.test.shim.js",
       "{projectRoot}/karma.zone-testing.module.js",
+      "{projectRoot}/karma.zoneless-testing.module.js",
       "{projectRoot}/webpack.test.js",
       "{projectRoot}/tsconfig.tests.json",
       "{projectRoot}/src/**/*.spec.ts",
diff --git a/packages/devextreme-angular/src/core/component.ts b/packages/devextreme-angular/src/core/component.ts
index ae9f62957529..3b04bedafeac 100644
--- a/packages/devextreme-angular/src/core/component.ts
+++ b/packages/devextreme-angular/src/core/component.ts
@@ -1,6 +1,8 @@
+/* eslint-disable max-classes-per-file */
 import {
   TransferState,
   makeStateKey,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
@@ -55,6 +57,29 @@ export const getServerStateKey = () => {
   return serverStateKey;
 };
 
+const publicOptionsCache = new WeakMap<object, Set<string>>();
+
+const getPublicOptions = (componentPrototype: object): Set<string> => {
+  let options = publicOptionsCache.get(componentPrototype);
+
+  if (!options) {
+    const names = new Set<string>();
+
+    for (let proto = componentPrototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
+      Object.entries(Object.getOwnPropertyDescriptors(proto)).forEach(([name, descriptor]) => {
+        if (descriptor.get && descriptor.set) {
+          names.add(name);
+        }
+      });
+    }
+
+    options = names;
+    publicOptionsCache.set(componentPrototype, options);
+  }
+
+  return options;
+};
+
 @Component({
   template: '',
 })
@@ -86,6 +111,8 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   templateUpdateRequired = false;
 
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
   private _updateTemplates() {
     if (this.templates.length && this.templateUpdateRequired) {
       const updatedTemplates = {};
@@ -105,6 +132,10 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
       const value = e.name === e.fullName ? e.value : e.component.option(e.name);
       this.eventHelper.fireNgEvent(`${e.name}Change`, [value]);
       this.optionChangedHandlers.emit(e);
+
+      if (!this.widgetUpdateLocked && getPublicOptions(Object.getPrototypeOf(this)).has(e.name)) {
+        this.changeDetectorRef.markForCheck();
+      }
     });
   }
 
@@ -122,10 +153,11 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
   protected _createEventEmitters(events) {
     const zone = this.ngZone;
+    const { changeDetectorRef } = this;
     this.eventHelper.createEmitters(events);
 
     this._initialOptions.eventsStrategy = (instance) => {
-      const strategy = new NgEventsStrategy(instance, zone);
+      const strategy = new NgEventsStrategy(instance, zone, changeDetectorRef);
 
       events.filter((event) => event.subscribe).forEach((event) => {
         strategy.addEmitter(event.subscribe, this[event.emit]);
@@ -136,7 +168,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
 
     this._initialOptions.nestedComponentOptions = function (component) {
       return {
-        eventsStrategy: (instance) => new NgEventsStrategy(instance, zone),
+        eventsStrategy: (instance) => new NgEventsStrategy(instance, zone, changeDetectorRef),
         nestedComponentOptions: component.option('nestedComponentOptions'),
       };
     };
@@ -237,7 +269,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     this.templates = [];
     templateHost.setHost(this);
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
-    this.eventHelper = new EmitterHelper(ngZone, this);
+    this.eventHelper = new EmitterHelper(ngZone, this, this.changeDetectorRef);
   }
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/packages/devextreme-angular/src/core/events-strategy.ts b/packages/devextreme-angular/src/core/events-strategy.ts
index 8d4aad7aad37..de1783bfba20 100644
--- a/packages/devextreme-angular/src/core/events-strategy.ts
+++ b/packages/devextreme-angular/src/core/events-strategy.ts
@@ -1,4 +1,5 @@
-import { EventEmitter, NgZone } from '@angular/core';
+/* eslint-disable max-classes-per-file */
+import { ChangeDetectorRef, EventEmitter, NgZone } from '@angular/core';
 import { DxComponent } from './component';
 
 interface IEventSubscription {
@@ -10,7 +11,11 @@ export class NgEventsStrategy {
 
   private events: { [key: string]: EventEmitter<any> } = {};
 
-  constructor(private readonly instance: any, private readonly zone: NgZone) { }
+  constructor(
+    private readonly instance: any,
+    private readonly zone: NgZone,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   hasEvent(name: string) {
     return this.getEmitter(name).observers.length !== 0;
@@ -25,6 +30,9 @@ export class NgEventsStrategy {
       } else {
         this.zone.run(() => emitter.next(args?.[0]));
       }
+      if (name !== 'optionChanged' || emitter.observers.length > internalSubs.length) {
+        this.changeDetectorRef?.markForCheck();
+      }
     }
   }
 
@@ -80,7 +88,11 @@ export class NgEventsStrategy {
 export class EmitterHelper {
   lockedValueChangeEvent = false;
 
-  constructor(private readonly zone: NgZone, private component: DxComponent) { }
+  constructor(
+    private readonly zone: NgZone,
+    private component: DxComponent,
+    private readonly changeDetectorRef?: ChangeDetectorRef,
+  ) { }
 
   fireNgEvent(eventName: string, eventArgs: any) {
     if (this.lockedValueChangeEvent && eventName === 'valueChange') {
@@ -91,6 +103,7 @@ export class EmitterHelper {
       this.zone.run(() => {
         emitter.next(eventArgs?.[0]);
       });
+      this.changeDetectorRef?.markForCheck();
     }
   }
 
diff --git a/packages/devextreme-angular/src/core/nested-option.ts b/packages/devextreme-angular/src/core/nested-option.ts
index b54ff6917f22..12beb5b097b1 100644
--- a/packages/devextreme-angular/src/core/nested-option.ts
+++ b/packages/devextreme-angular/src/core/nested-option.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import {
   Component, QueryList, ElementRef, Renderer2, EventEmitter,
 } from '@angular/core';
diff --git a/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts b/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts
new file mode 100644
index 000000000000..632a78debafd
--- /dev/null
+++ b/packages/devextreme-angular/tests/src/zone-modes/change-detection.spec.ts
@@ -0,0 +1,438 @@
+/* tslint:disable:component-selector */
+import {
+  Component,
+  ViewChild,
+  signal,
+} from '@angular/core';
+
+import {
+  TestBed,
+  ComponentFixture,
+} from '@angular/core/testing';
+
+import {
+  DxTextBoxModule,
+  DxTextBoxComponent,
+  DxDataGridModule,
+  DxDataGridComponent,
+  DxPopupModule,
+  DxPopupComponent,
+  DxFormModule,
+  DxFormComponent,
+  DxListModule,
+  DxListComponent,
+  DxTemplateModule,
+  DxDraggableModule,
+  DxChartModule,
+} from 'devextreme-angular';
+
+const isZoneless = typeof (window as any).Zone === 'undefined';
+const mode = isZoneless ? 'zoneless' : 'zone';
+
+@Component({
+  selector: 'test-host',
+  imports: [
+    DxTextBoxModule, DxDataGridModule, DxPopupModule, DxFormModule, DxListModule,
+    DxTemplateModule, DxDraggableModule, DxChartModule,
+  ],
+  template: '',
+})
+class TestHostComponent {
+  @ViewChild(DxTextBoxComponent) textBox: DxTextBoxComponent;
+
+  @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;
+
+  @ViewChild(DxPopupComponent) popup: DxPopupComponent;
+
+  @ViewChild(DxFormComponent) form: DxFormComponent;
+
+  @ViewChild(DxListComponent) list: DxListComponent;
+
+  text = signal('');
+
+  plain = '';
+
+  selectedKeys = signal<number[]>([]);
+
+  visible = signal(true);
+
+  pageIndex = signal(0);
+
+  suffix = signal('1');
+
+  clicks = 0;
+
+  dragMoves = 0;
+
+  renders = 0;
+
+  rows = [{ id: 1 }, { id: 2 }, { id: 3 }];
+
+  points = [{ arg: 1, val: 1 }, { arg: 2, val: 3 }, { arg: 3, val: 2 }];
+
+  items = ['a', 'b'];
+
+  formData = { name: 'initial' };
+
+  countRender(): string {
+    this.renders += 1;
+    return '';
+  }
+}
+
+async function render(template: string): Promise<ComponentFixture<TestHostComponent>> {
+  TestBed.configureTestingModule({ imports: [TestHostComponent] });
+  TestBed.overrideComponent(TestHostComponent, { set: { template } });
+
+  const fixture = TestBed.createComponent(TestHostComponent);
+  if (!isZoneless) {
+    fixture.autoDetectChanges();
+  }
+  await fixture.whenStable();
+
+  return fixture;
+}
+
+// Runs a widget-side change the way it arrives in a real app: in a zone app user
+// interaction runs inside the Angular zone, in a zoneless app there is no zone.
+function act<T>(fixture: ComponentFixture<TestHostComponent>, fn: () => T): T {
+  return isZoneless ? fn() : fixture.ngZone.run(fn);
+}
+
+function outputText(fixture: ComponentFixture<TestHostComponent>): string {
+  return fixture.nativeElement.querySelector('.out').textContent.trim();
+}
+
+function mouse(target: EventTarget, type: string, x: number, y: number): void {
+  target.dispatchEvent(new MouseEvent(type, {
+    bubbles: true, cancelable: true, button: 0, buttons: 1, clientX: x, clientY: y,
+  }));
+}
+
+const wait = (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms); });
+
+describe(`Change detection [${mode}]: environment`, () => {
+  it(isZoneless ? 'runs without zone.js' : 'runs with zone.js', () => {
+    expect(typeof (window as any).Zone).toBe(isZoneless ? 'undefined' : 'function');
+  });
+
+  if (isZoneless) {
+    it('does not refresh the view without a change detection trigger', async () => {
+      const fixture = await render(`
+        <dx-text-box></dx-text-box>
+        <span class="out">{{ plain }}</span>
+      `);
+
+      fixture.componentInstance.plain = 'changed';
+      await wait(50);
+      await fixture.whenStable();
+
+      expect(outputText(fixture)).toBe('');
+    });
+  }
+});
+
+describe(`Change detection [${mode}]: template-bound outputs`, () => {
+  it('[(value)] bound to a signal receives a widget-side change', async () => {
+    const fixture = await render(`
+      <dx-text-box [(value)]="text"></dx-text-box>
+      <span class="out">{{ text() }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.text()).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('[(value)] bound to a plain field receives a widget-side change', async () => {
+    const fixture = await render(`
+      <dx-text-box [(value)]="plain"></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('(onValueChanged) handler that sets a plain field updates the view', async () => {
+    const fixture = await render(`
+      <dx-text-box (onValueChanged)="plain = $event.value"></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.textBox.instance.option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('[(selectedRowKeys)] receives a selection made by the grid', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id" [(selectedRowKeys)]="selectedKeys">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ selectedKeys().join(',') }}</span>
+    `);
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('[(visible)] receives a popup closed by the widget', async () => {
+    const fixture = await render(`
+      <dx-popup [(visible)]="visible"></dx-popup>
+      <span class="out">{{ visible() }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.popup.instance.option('visible', false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('false');
+  });
+
+  it('nested option [(pageIndex)] receives a page change made by the grid', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-paging [pageSize]="1" [(pageIndex)]="pageIndex"></dxo-paging>
+      </dx-data-grid>
+      <span class="out">{{ pageIndex() }}</span>
+    `);
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.pageIndex(2));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('2');
+  });
+});
+
+describe(`Change detection [${mode}]: events registered outside the Angular zone (mousemove)`, () => {
+  it('(onDragMove) driven by mousemove updates the view', async () => {
+    const fixture = await render(`
+      <dx-draggable (onDragMove)="dragMoves = dragMoves + 1">
+        <div class="drag-handle" style="width: 50px; height: 50px;"></div>
+      </dx-draggable>
+      <span class="out">{{ dragMoves > 0 }}</span>
+    `);
+    const handle = fixture.nativeElement.querySelector('.drag-handle');
+
+    mouse(handle, 'mousedown', 10, 10);
+    await fixture.whenStable();
+
+    mouse(document, 'mousemove', 40, 40);
+    mouse(document, 'mousemove', 60, 60);
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.dragMoves).toBeGreaterThan(0);
+    expect(outputText(fixture)).toBe('true');
+
+    mouse(document, 'mouseup', 60, 60);
+  });
+
+  it('mouse movement over a widget without handlers does not run change detection', async () => {
+    const fixture = await render(`
+      <dx-chart [dataSource]="points">
+        <dxo-animation [enabled]="false"></dxo-animation>
+        <dxi-series argumentField="arg" valueField="val"></dxi-series>
+      </dx-chart>
+      <span class="out">{{ countRender() }}</span>
+    `);
+    const host = fixture.componentInstance;
+    const surface = fixture.nativeElement.querySelector('dx-chart svg');
+    const rendersBefore = host.renders;
+
+    for (let i = 0; i < 20; i += 1) {
+      mouse(surface, 'mouseover', 10 + i * 5, 10 + i * 5);
+      mouse(surface, 'mousemove', 10 + i * 5, 10 + i * 5);
+      mouse(surface, 'mouseout', 10 + i * 5, 10 + i * 5);
+    }
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(host.renders).toBe(rendersBefore);
+
+    if (!isZoneless) {
+      act(fixture, () => {});
+      await fixture.whenStable();
+
+      expect(host.renders).toBeGreaterThan(rendersBefore);
+    }
+  });
+});
+
+if (isZoneless) {
+  describe(`Change detection [${mode}]: widget-internal state`, () => {
+    it('hovering over List items does not run change detection', async () => {
+      const fixture = await render(`
+        <dx-list [items]="items" [hoverStateEnabled]="true"></dx-list>
+        <span class="out">{{ countRender() }}</span>
+      `);
+      const host = fixture.componentInstance;
+      const listItems = fixture.nativeElement.querySelectorAll('.dx-list-item');
+      const rendersBefore = host.renders;
+
+      listItems.forEach((item: Element) => {
+        mouse(item, 'mouseover', 5, 5);
+        mouse(item, 'mouseenter', 5, 5);
+      });
+      const hovered = host.list.instance.option('hoveredElement');
+      await wait(50);
+      await fixture.whenStable();
+
+      expect(hovered).toBeTruthy();
+      expect(host.renders).toBe(rendersBefore);
+    });
+  });
+}
+
+describe(`Change detection [${mode}]: dxTemplate content`, () => {
+  it('re-renders when a parent signal used in the template changes', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items">
+        <div *dxTemplate="let item of 'item'"><span class="tpl">{{ item }}-{{ suffix() }}</span></div>
+      </dx-list>
+    `);
+
+    act(fixture, () => fixture.componentInstance.suffix.set('2'));
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelector('.tpl').textContent).toBe('a-2');
+  });
+
+  it('updates the view after a (click) handler inside the template', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items">
+        <div *dxTemplate="let item of 'item'"><button class="tpl-btn" (click)="clicks = clicks + 1"></button></div>
+      </dx-list>
+      <span class="out">{{ clicks }}</span>
+    `);
+
+    fixture.nativeElement.querySelector('.tpl-btn').click();
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('1');
+  });
+});
+
+describe(`Change detection [${mode}]: state changed without a template binding`, () => {
+  it('output subscribed in code updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.grid.onSelectionChanged.subscribe((e) => { host.plain = e.selectedRowKeys.join(','); });
+    await act(fixture, () => host.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('2');
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('handler attached with instance.on() updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.grid.instance.on('selectionChanged', (e) => { host.plain = e.selectedRowKeys.join(','); });
+    await act(fixture, () => host.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('2');
+    expect(outputText(fixture)).toBe('2');
+  });
+
+  it('onOptionChanged subscribed in code updates the view for an unbound option', async () => {
+    const fixture = await render(`
+      <dx-text-box></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.textBox.onOptionChanged.subscribe((e) => {
+      if (e.name === 'hint') {
+        host.plain = e.value;
+      }
+    });
+    act(fixture, () => host.textBox.instance.option('hint', 'changed'));
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('instance.on(\'optionChanged\') handler for an unbound public option updates the view', async () => {
+    const fixture = await render(`
+      <dx-text-box></dx-text-box>
+      <span class="out">{{ plain }}</span>
+    `);
+    const host = fixture.componentInstance;
+
+    host.textBox.instance.on('optionChanged', (e) => {
+      if (e.name === 'hint') {
+        host.plain = e.value;
+      }
+    });
+    act(fixture, () => host.textBox.instance.option('hint', 'changed'));
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(host.plain).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it('template reading an unbound component option updates the view', async () => {
+    const fixture = await render(`
+      <dx-data-grid #gridRef [dataSource]="rows" keyExpr="id">
+        <dxo-selection mode="multiple"></dxo-selection>
+      </dx-data-grid>
+      <span class="out">{{ gridRef.selectedRowKeys.length }}</span>
+    `);
+
+    expect(outputText(fixture)).toBe('0');
+
+    await act(fixture, () => fixture.componentInstance.grid.instance.selectRows([2], false));
+    await fixture.whenStable();
+
+    expect(outputText(fixture)).toBe('1');
+  });
+
+  it('one-way [formData] changed in place by the Form updates the view', async () => {
+    const fixture = await render(`
+      <dx-form [formData]="formData"></dx-form>
+      <span class="out">{{ formData.name }}</span>
+    `);
+
+    act(fixture, () => fixture.componentInstance.form.instance.getEditor('name').option('value', 'changed'));
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.formData.name).toBe('changed');
+    expect(outputText(fixture)).toBe('changed');
+  });
+
+  it(isZoneless
+    ? 'item pushed to a bound array in a timer does not reach the widget (documented limitation)'
+    : 'item pushed to a bound array in a timer reaches the widget', async () => {
+    const fixture = await render(`
+      <dx-list [items]="items"></dx-list>
+    `);
+
+    act(fixture, () => setTimeout(() => fixture.componentInstance.items.push('c')));
+    await wait(50);
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelectorAll('.dx-list-item').length).toBe(isZoneless ? 2 : 3);
+  });
+});
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
index 35e23a722189..952c1c852695 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma-multi-env.impl.ts
@@ -82,7 +82,13 @@ function createExecutionOrder(
   }
 
   const order: KarmaEnvironment[] = [];
-  const validEnvironments: KarmaEnvironment[] = ['client', 'server', 'hydration'];
+  const validEnvironments: KarmaEnvironment[] = [
+    'client',
+    'server',
+    'hydration',
+    'zone',
+    'zoneless',
+  ];
 
   for (const environment of validEnvironments) {
     if (environments.includes(environment)) {
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
index f639c5a31f6f..b6c3d15c31c8 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/karma.types.ts
@@ -1,4 +1,4 @@
-export type KarmaEnvironment = 'client' | 'server' | 'hydration';
+export type KarmaEnvironment = 'client' | 'server' | 'hydration' | 'zone' | 'zoneless';
 
 export interface EnvironmentConfig {
   shimPath: string;
@@ -14,6 +14,12 @@ export const ENVIRONMENT_CONFIGS: Record<KarmaEnvironment, EnvironmentConfig> =
   hydration: {
     shimPath: 'karma.hydration.test.shim.js',
   },
+  zone: {
+    shimPath: 'karma.zone.test.shim.js',
+  },
+  zoneless: {
+    shimPath: 'karma.zoneless.test.shim.js',
+  },
 };
 
 export const DEFAULT_ENVIRONMENTS: KarmaEnvironment[] = ['client', 'server', 'hydration'];
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
index 86cabc3c2fe5..ef34f4008093 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.d.ts
@@ -6,4 +6,4 @@ export interface KarmaMultiEnvExecutorSchema {
   timeout?: number;
 }
 
-export type KarmaEnvironment = 'client' | 'server' | 'hydration';
+export type KarmaEnvironment = 'client' | 'server' | 'hydration' | 'zone' | 'zoneless';
diff --git a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
index 869b099e6eee..67d00ee129bd 100644
--- a/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
+++ b/packages/nx-infra-plugin/src/executors/karma-multi-env/schema.json
@@ -12,7 +12,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["client", "server", "hydration"]
+        "enum": ["client", "server", "hydration", "zone", "zoneless"]
       },
       "default": ["client", "server", "hydration"]
     },