diff --git a/apps/demos/Demos/Gauges/AnglesCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/AnglesCustomization/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/AnglesCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/AnglesCustomization/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/AnglesCustomization/Angular/index.html b/apps/demos/Demos/Gauges/AnglesCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/AnglesCustomization/Angular/index.html
+++ b/apps/demos/Demos/Gauges/AnglesCustomization/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/Gauges/BarGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/BarGauge/Angular/app/app.component.ts
index 7085be037285..32763cafd43b 100644
--- a/apps/demos/Demos/Gauges/BarGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/BarGauge/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 { DxBarGaugeModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Color, Service } from './app.service';
 
@@ -40,8 +40,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/BarGauge/Angular/index.html b/apps/demos/Demos/Gauges/BarGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/BarGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/BarGauge/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/Gauges/CircularGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/CircularGauge/Angular/app/app.component.ts
index ad3b5038e3ef..8422e45f09c3 100644
--- a/apps/demos/Demos/Gauges/CircularGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/CircularGauge/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 { DxCircularGaugeModule, DxSelectBoxModule } from 'devextreme-angular';
 import { Data, 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/Gauges/CircularGauge/Angular/index.html b/apps/demos/Demos/Gauges/CircularGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/CircularGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/CircularGauge/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/Gauges/CustomLayout/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/CustomLayout/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/CustomLayout/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/CustomLayout/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/CustomLayout/Angular/index.html b/apps/demos/Demos/Gauges/CustomLayout/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/CustomLayout/Angular/index.html
+++ b/apps/demos/Demos/Gauges/CustomLayout/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/Gauges/CustomLayoutLinearGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/app/app.component.ts
index d109d3338fd6..d7ea018b98f9 100644
--- a/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/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 { DxLinearGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/index.html b/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/CustomLayoutLinearGauge/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/Gauges/DifferentSubvalueIndicatorTypes/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/index.html b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/Angular/index.html
+++ b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypes/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/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts
index 80b938ff7966..c6c7daa4499d 100644
--- a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/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 { DxLinearGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ export class AppComponent {
   customizeText = ({ valueText }) => `$${valueText}`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/index.html b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/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/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts
index 86a021f259a2..9047e7c26108 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/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 { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ export class AppComponent {
   customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/index.html b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/Angular/index.html
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypes/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/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts
index 35fb606640ae..ba24cdbb8cd3 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/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 { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ export class AppComponent {
   customizeText: DxLinearGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/index.html b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/DifferentValueIndicatorTypesLinearGauge/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/Gauges/GaugeTitleCustomized/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/index.html b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/index.html
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/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/Gauges/GaugeTooltip/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts
index 46ec9c6ed8f2..c975e335b667 100644
--- a/apps/demos/Demos/Gauges/GaugeTooltip/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/GaugeTooltip/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 { DxCircularGaugeModule } 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/Gauges/GaugeTooltip/Angular/index.html b/apps/demos/Demos/Gauges/GaugeTooltip/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/GaugeTooltip/Angular/index.html
+++ b/apps/demos/Demos/Gauges/GaugeTooltip/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/Gauges/LabelsCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/LabelsCustomization/Angular/app/app.component.ts
index 38b109cfd97e..16015b35433d 100644
--- a/apps/demos/Demos/Gauges/LabelsCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/LabelsCustomization/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 { DxBarGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -21,8 +21,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/LabelsCustomization/Angular/index.html b/apps/demos/Demos/Gauges/LabelsCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/LabelsCustomization/Angular/index.html
+++ b/apps/demos/Demos/Gauges/LabelsCustomization/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/Gauges/LinearGauge/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/LinearGauge/Angular/app/app.component.ts
index 1000e015d3e4..bca9b6613789 100644
--- a/apps/demos/Demos/Gauges/LinearGauge/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/LinearGauge/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 { DxLinearGaugeModule, DxSelectBoxModule } from 'devextreme-angular';
 
 import { City, 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/Gauges/LinearGauge/Angular/index.html b/apps/demos/Demos/Gauges/LinearGauge/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/LinearGauge/Angular/index.html
+++ b/apps/demos/Demos/Gauges/LinearGauge/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/Gauges/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.ts
index 662da41ce1f1..e68e8a771ebd 100644
--- a/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/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 { DxCircularGaugeModule, DxLinearGaugeModule, DxSliderModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,8 +24,4 @@ export class AppComponent {
   color = '#f05b41';
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/Overview/Angular/index.html b/apps/demos/Demos/Gauges/Overview/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/Overview/Angular/index.html
+++ b/apps/demos/Demos/Gauges/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/Gauges/Palette/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/Palette/Angular/app/app.component.ts
index 0fc9ac38a26d..7a1b924ef23d 100644
--- a/apps/demos/Demos/Gauges/Palette/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/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 { DxBarGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/Palette/Angular/index.html b/apps/demos/Demos/Gauges/Palette/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/Palette/Angular/index.html
+++ b/apps/demos/Demos/Gauges/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/Gauges/PaletteForRanges/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/PaletteForRanges/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/PaletteForRanges/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/PaletteForRanges/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/PaletteForRanges/Angular/index.html b/apps/demos/Demos/Gauges/PaletteForRanges/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/PaletteForRanges/Angular/index.html
+++ b/apps/demos/Demos/Gauges/PaletteForRanges/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/Gauges/RangeBarBaseValue/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/RangeBarBaseValue/Angular/app/app.component.ts
index d47e2586d583..5e15b053595e 100644
--- a/apps/demos/Demos/Gauges/RangeBarBaseValue/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/RangeBarBaseValue/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 { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 import { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 
@@ -22,8 +22,4 @@ export class AppComponent {
   customizeText: ScaleLabel['customizeText'] = ({ valueText }) => `${valueText}°`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/RangeBarBaseValue/Angular/index.html b/apps/demos/Demos/Gauges/RangeBarBaseValue/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/RangeBarBaseValue/Angular/index.html
+++ b/apps/demos/Demos/Gauges/RangeBarBaseValue/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/Gauges/ScaleCustomTickInterval/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/ScaleCustomTickInterval/Angular/app/app.component.ts
index d109d3338fd6..d7ea018b98f9 100644
--- a/apps/demos/Demos/Gauges/ScaleCustomTickInterval/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/ScaleCustomTickInterval/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 { DxLinearGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/ScaleCustomTickInterval/Angular/index.html b/apps/demos/Demos/Gauges/ScaleCustomTickInterval/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/ScaleCustomTickInterval/Angular/index.html
+++ b/apps/demos/Demos/Gauges/ScaleCustomTickInterval/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/Gauges/ScaleCustomTickValues/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/ScaleCustomTickValues/Angular/app/app.component.ts
index d109d3338fd6..d7ea018b98f9 100644
--- a/apps/demos/Demos/Gauges/ScaleCustomTickValues/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/ScaleCustomTickValues/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 { DxLinearGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/ScaleCustomTickValues/Angular/index.html b/apps/demos/Demos/Gauges/ScaleCustomTickValues/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/ScaleCustomTickValues/Angular/index.html
+++ b/apps/demos/Demos/Gauges/ScaleCustomTickValues/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/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts
index 86a021f259a2..9047e7c26108 100644
--- a/apps/demos/Demos/Gauges/ScaleLabelFormatting/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/ScaleLabelFormatting/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 { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ export class AppComponent {
   customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} %`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/ScaleLabelFormatting/Angular/index.html b/apps/demos/Demos/Gauges/ScaleLabelFormatting/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/ScaleLabelFormatting/Angular/index.html
+++ b/apps/demos/Demos/Gauges/ScaleLabelFormatting/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/Gauges/ScaleMinorTicks/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/ScaleMinorTicks/Angular/app/app.component.ts
index e8ee13a0d22a..71b563253350 100644
--- a/apps/demos/Demos/Gauges/ScaleMinorTicks/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/ScaleMinorTicks/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 { DxCircularGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/ScaleMinorTicks/Angular/index.html b/apps/demos/Demos/Gauges/ScaleMinorTicks/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/ScaleMinorTicks/Angular/index.html
+++ b/apps/demos/Demos/Gauges/ScaleMinorTicks/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/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts
index 094de7c3f3b3..290476ca6593 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/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 { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
 if (!/localhost/.test(document.location.host)) {
@@ -18,8 +18,4 @@ export class AppComponent {
   customizeText: DxCircularGaugeTypes.ScaleLabel['customizeText'] = ({ valueText }) => `${valueText} °C`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/index.html b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/Angular/index.html
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorTextFormatting/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/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/app/app.component.ts
index 3d1334749f95..19e4f8770fd0 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/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 { DxLinearGaugeModule, DxLinearGaugeTypes } from 'devextreme-angular/ui/linear-gauge';
 import { Service, PowerInfo } 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/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/index.html b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/Angular/index.html
+++ b/apps/demos/Demos/Gauges/SubvalueIndicatorsRuntimeCustomization/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/Gauges/Tooltip/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/Tooltip/Angular/app/app.component.ts
index 218f1b6d2e08..f16223e73985 100644
--- a/apps/demos/Demos/Gauges/Tooltip/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/Tooltip/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 { DxBarGaugeModule } from 'devextreme-angular';
 
 if (!/localhost/.test(document.location.host)) {
@@ -27,8 +27,4 @@ export class AppComponent {
   customizeText = (arg) => this.getText(arg.item, arg.text);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/Tooltip/Angular/index.html b/apps/demos/Demos/Gauges/Tooltip/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/Tooltip/Angular/index.html
+++ b/apps/demos/Demos/Gauges/Tooltip/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/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts
index 2372076ac6a0..6aa2d57ba9e8 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/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 { DxNumberBoxModule, DxButtonModule } from 'devextreme-angular';
 import { DxCircularGaugeModule, DxCircularGaugeTypes } from 'devextreme-angular/ui/circular-gauge';
 
@@ -34,8 +34,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/index.html b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/index.html
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/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/Gauges/VariableNumberOfBars/Angular/app/app.component.ts b/apps/demos/Demos/Gauges/VariableNumberOfBars/Angular/app/app.component.ts
index 17b8e86ef6aa..79895674309f 100644
--- a/apps/demos/Demos/Gauges/VariableNumberOfBars/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Gauges/VariableNumberOfBars/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 { DxBarGaugeModule, DxCheckBoxModule } from 'devextreme-angular';
 
 import { Product, Service } from './app.service';
@@ -42,8 +42,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/Gauges/VariableNumberOfBars/Angular/index.html b/apps/demos/Demos/Gauges/VariableNumberOfBars/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/Gauges/VariableNumberOfBars/Angular/index.html
+++ b/apps/demos/Demos/Gauges/VariableNumberOfBars/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/RangeSelector/BackgroundImage/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/BackgroundImage/Angular/app/app.component.ts
index 512e49386fe4..2dea1535355f 100644
--- a/apps/demos/Demos/RangeSelector/BackgroundImage/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/BackgroundImage/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';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,8 +24,4 @@ export class AppComponent {
   endSelectedValue: Date = new Date(2012, 8, 29, 17, 0, 0);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/BackgroundImage/Angular/index.html b/apps/demos/Demos/RangeSelector/BackgroundImage/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/BackgroundImage/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/BackgroundImage/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/RangeSelector/Calculation/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.ts
index 194b9f9db4e5..8d492c71182f 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/Calculation/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 { DatePipe } from '@angular/common';
 import { DxSelectBoxModule } from 'devextreme-angular';
 import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
@@ -47,8 +47,4 @@ export class AppComponent {
   customizeLabel: DxRangeSelectorTypes.Properties['scale']['label']['customizeText'] = ({ value }) => this.pipe.transform(value, 'MMM');
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/Calculation/Angular/index.html b/apps/demos/Demos/RangeSelector/Calculation/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/Calculation/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/RangeSelector/CustomFormatting/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/CustomFormatting/Angular/app/app.component.ts
index 7ffd9f9687d0..fa178292efb1 100644
--- a/apps/demos/Demos/RangeSelector/CustomFormatting/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/CustomFormatting/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';
 
 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/RangeSelector/CustomFormatting/Angular/index.html b/apps/demos/Demos/RangeSelector/CustomFormatting/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/CustomFormatting/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/CustomFormatting/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/RangeSelector/DateTimeScale/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/DateTimeScale/Angular/app/app.component.ts
index b1ec6129dfce..5258dafb8204 100644
--- a/apps/demos/Demos/RangeSelector/DateTimeScale/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/DateTimeScale/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 { Service, MonthPeriod } 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/RangeSelector/DateTimeScale/Angular/index.html b/apps/demos/Demos/RangeSelector/DateTimeScale/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/DateTimeScale/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/DateTimeScale/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/RangeSelector/DateTimeScaleLightweight/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/Angular/app/app.component.ts
index b7e95d234a44..dccb6d535cda 100644
--- a/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/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';
 
 if (!/localhost/.test(document.location.host)) {
@@ -24,8 +24,4 @@ export class AppComponent {
   selectedEndValue: Date = new Date(2011, 2, 5);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/Angular/index.html b/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/DateTimeScaleLightweight/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/RangeSelector/DiscreteScale/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts
index 7f5a3631a451..7d8bbcc58e22 100644
--- a/apps/demos/Demos/RangeSelector/DiscreteScale/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/DiscreteScale/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 { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
 import { Service, ProductionData } from './app.service';
@@ -55,8 +55,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/DiscreteScale/Angular/index.html b/apps/demos/Demos/RangeSelector/DiscreteScale/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/DiscreteScale/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/DiscreteScale/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/RangeSelector/EmbeddedChart/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/EmbeddedChart/Angular/app/app.component.ts
index 9b9841bee85a..913ba0b541c9 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChart/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChart/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';
 
 if (!/localhost/.test(document.location.host)) {
@@ -31,8 +31,4 @@ export class AppComponent {
   endSelectedValue: Date = new Date(2025, 0, 1);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/EmbeddedChart/Angular/index.html b/apps/demos/Demos/RangeSelector/EmbeddedChart/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChart/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChart/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/RangeSelector/EmbeddedChartCustomized/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/Angular/app/app.component.ts
index 9271a301460d..df3fbe0e7e10 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/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';
 
 if (!/localhost/.test(document.location.host)) {
@@ -38,8 +38,4 @@ export class AppComponent {
   customizeText = ({ valueText }) => `${valueText} s`;
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/Angular/index.html b/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChartCustomized/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/RangeSelector/EmbeddedChartSeriesTemplate/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/Angular/app/app.component.ts
index 0ac3ae5cb957..354cba081fe4 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/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 { Service, Data } 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/RangeSelector/EmbeddedChartSeriesTemplate/Angular/index.html b/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/EmbeddedChartSeriesTemplate/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/RangeSelector/Filter/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/Filter/Angular/app/app.component.ts
index cb92a6ca0332..bdd5a35a58c9 100644
--- a/apps/demos/Demos/RangeSelector/Filter/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/Filter/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 { DxDataGridModule } from 'devextreme-angular';
 import { DxRangeSelectorModule, DxRangeSelectorTypes } from 'devextreme-angular/ui/range-selector';
 import { Service, Employee } from './app.service';
@@ -39,8 +39,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/Filter/Angular/index.html b/apps/demos/Demos/RangeSelector/Filter/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/Filter/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/Filter/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/RangeSelector/LogarithmicScale/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts
index 73adbb3194a1..095c82a76b0f 100644
--- a/apps/demos/Demos/RangeSelector/LogarithmicScale/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/LogarithmicScale/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';
 
@@ -33,8 +33,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/LogarithmicScale/Angular/index.html b/apps/demos/Demos/RangeSelector/LogarithmicScale/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/LogarithmicScale/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/LogarithmicScale/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/RangeSelector/NumericScale/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/NumericScale/Angular/app/app.component.ts
index b6ccc7bfad30..630833231dd7 100644
--- a/apps/demos/Demos/RangeSelector/NumericScale/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/NumericScale/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 { Service, Product } 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/RangeSelector/NumericScale/Angular/index.html b/apps/demos/Demos/RangeSelector/NumericScale/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/NumericScale/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/NumericScale/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/RangeSelector/NumericScaleLightweight/Angular/app/app.component.ts b/apps/demos/Demos/RangeSelector/NumericScaleLightweight/Angular/app/app.component.ts
index 36ca7b140cd0..bcc1299d92ef 100644
--- a/apps/demos/Demos/RangeSelector/NumericScaleLightweight/Angular/app/app.component.ts
+++ b/apps/demos/Demos/RangeSelector/NumericScaleLightweight/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';
 
 if (!/localhost/.test(document.location.host)) {
@@ -17,8 +17,4 @@ if (!/localhost/.test(document.location.host)) {
 export class AppComponent {
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/RangeSelector/NumericScaleLightweight/Angular/index.html b/apps/demos/Demos/RangeSelector/NumericScaleLightweight/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/RangeSelector/NumericScaleLightweight/Angular/index.html
+++ b/apps/demos/Demos/RangeSelector/NumericScaleLightweight/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/VectorMap/BubbleMarkers/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/BubbleMarkers/Angular/app/app.component.ts
index de9af96d3637..192d69ee681a 100644
--- a/apps/demos/Demos/VectorMap/BubbleMarkers/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/BubbleMarkers/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { FeatureCollection, 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/VectorMap/BubbleMarkers/Angular/index.html b/apps/demos/Demos/VectorMap/BubbleMarkers/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/BubbleMarkers/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/BubbleMarkers/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/VectorMap/ColorsCustomization/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/ColorsCustomization/Angular/app/app.component.ts
index f830d37619ba..29a5c74d6523 100644
--- a/apps/demos/Demos/VectorMap/ColorsCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/ColorsCustomization/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { DxVectorMapTypes } from 'devextreme-angular/ui/vector-map';
@@ -61,8 +61,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/Angular/index.html b/apps/demos/Demos/VectorMap/ColorsCustomization/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/ColorsCustomization/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/ColorsCustomization/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/VectorMap/CustomAnnotations/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.ts
index 9426f186b9a8..6cdf46631f90 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/usa.js';
@@ -35,8 +35,4 @@ export class AppComponent {
   };
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/index.html b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/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/VectorMap/CustomMapData/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/CustomMapData/Angular/app/app.component.ts
index d0a89e6394ac..c811ea2c0084 100644
--- a/apps/demos/Demos/VectorMap/CustomMapData/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/CustomMapData/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 { DxVectorMapModule } from 'devextreme-angular';
 import { FeatureCollection, 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/VectorMap/CustomMapData/Angular/index.html b/apps/demos/Demos/VectorMap/CustomMapData/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/VectorMap/CustomMapData/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/CustomMapData/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/VectorMap/CustomProjection/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/CustomProjection/Angular/app/app.component.ts
index 8a34a23aa3bd..c39ce7446a11 100644
--- a/apps/demos/Demos/VectorMap/CustomProjection/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/CustomProjection/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { FeatureCollection, 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/VectorMap/CustomProjection/Angular/index.html b/apps/demos/Demos/VectorMap/CustomProjection/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/CustomProjection/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/CustomProjection/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/VectorMap/DynamicViewport/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.ts
index 2e53b5b3b6b7..d35254c4e123 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.ts
@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core';
+import { Component, enableProdMode, ViewChild } from '@angular/core';
 import { DxTextBoxModule, DxSwitchModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
@@ -53,8 +53,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/index.html b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/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/VectorMap/FloorPlan/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/FloorPlan/Angular/app/app.component.ts
index 16d06c2e2f9c..34a8adfa7ada 100644
--- a/apps/demos/Demos/VectorMap/FloorPlan/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/FloorPlan/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 { DxVectorMapModule } from 'devextreme-angular';
 import { FeatureCollection, Service } 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/VectorMap/FloorPlan/Angular/index.html b/apps/demos/Demos/VectorMap/FloorPlan/Angular/index.html
index 7dd155b53981..03f4ed202a06 100644
--- a/apps/demos/Demos/VectorMap/FloorPlan/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/FloorPlan/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/VectorMap/ImageMarkers/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/ImageMarkers/Angular/app/app.component.ts
index 459dfc5d31cf..f4d366256b8c 100644
--- a/apps/demos/Demos/VectorMap/ImageMarkers/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/ImageMarkers/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/usa.js';
 import { FeatureCollection, 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/VectorMap/ImageMarkers/Angular/index.html b/apps/demos/Demos/VectorMap/ImageMarkers/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/ImageMarkers/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/ImageMarkers/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/VectorMap/Legend/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/Legend/Angular/app/app.component.ts
index be669a1efdba..7b7943c7e598 100644
--- a/apps/demos/Demos/VectorMap/Legend/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/Legend/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { FeatureCollection, Service } from './app.service';
@@ -60,8 +60,4 @@ export class AppComponent {
   customizeMarkers = ({ index }) => ['< 8000K', '8000K to 10000K', '> 10000K'][index];
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/Legend/Angular/index.html b/apps/demos/Demos/VectorMap/Legend/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/Legend/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/Legend/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/VectorMap/MultipleLayers/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/MultipleLayers/Angular/app/app.component.ts
index bca3ef34b72a..5aa1a1e2e96c 100644
--- a/apps/demos/Demos/VectorMap/MultipleLayers/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/MultipleLayers/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { FeatureCollection, Service } from './app.service';
@@ -30,8 +30,4 @@ export class AppComponent {
   customizeText = ({ color }) => (color === '#3c20c8' ? 'Cold' : 'Warm');
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/MultipleLayers/Angular/index.html b/apps/demos/Demos/VectorMap/MultipleLayers/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/MultipleLayers/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/MultipleLayers/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/VectorMap/Overview/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/Overview/Angular/app/app.component.ts
index 47824340b4ee..7e69b7fdc5bf 100644
--- a/apps/demos/Demos/VectorMap/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/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 { DecimalPipe } from '@angular/common';
 import { DxVectorMapModule, DxPieChartModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
@@ -55,8 +55,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/Overview/Angular/index.html b/apps/demos/Demos/VectorMap/Overview/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/Overview/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/Overview/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/VectorMap/Palette/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/Palette/Angular/app/app.component.ts
index 2394de285bfb..25105fdd2e30 100644
--- a/apps/demos/Demos/VectorMap/Palette/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { Service } from './app.service';
@@ -50,8 +50,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/Palette/Angular/index.html b/apps/demos/Demos/VectorMap/Palette/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/Palette/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/Palette/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/VectorMap/PieMarkers/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/PieMarkers/Angular/app/app.component.ts
index ea01088862be..a179e7e08b00 100644
--- a/apps/demos/Demos/VectorMap/PieMarkers/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/PieMarkers/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 { DxVectorMapModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { FeatureCollection, Service } from './app.service';
@@ -38,8 +38,4 @@ export class AppComponent {
     : undefined);
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/PieMarkers/Angular/index.html b/apps/demos/Demos/VectorMap/PieMarkers/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/PieMarkers/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/PieMarkers/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/VectorMap/TooltipsCustomization/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/TooltipsCustomization/Angular/app/app.component.ts
index bdca34e3ce68..024c35fd5945 100644
--- a/apps/demos/Demos/VectorMap/TooltipsCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/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 { DxVectorMapModule, DxPieChartModule } from 'devextreme-angular';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
@@ -53,8 +53,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/Angular/index.html b/apps/demos/Demos/VectorMap/TooltipsCustomization/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/TooltipsCustomization/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/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/VectorMap/ZoomingAndCentering/Angular/app/app.component.ts b/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/app/app.component.ts
index d99c575e0db3..34207aecf498 100644
--- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
-  Component, ViewChild, enableProdMode, provideZoneChangeDetection,
+  Component, ViewChild, enableProdMode,
 } from '@angular/core';
 import { DxButtonModule } from 'devextreme-angular';
 import { DxVectorMapModule, DxVectorMapComponent, DxVectorMapTypes } from 'devextreme-angular/ui/vector-map';
@@ -55,8 +55,4 @@ export class AppComponent {
   }
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-  ],
-});
+bootstrapApplication(AppComponent);
diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/index.html b/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/index.html
index 6c25556bab9b..f7ebb3c93212 100644
--- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/Angular/index.html
+++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/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/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"]
     },