refactor(*): migrate to zoneless change detection

- Remove zone.js and provideZoneChangeDetection; rely on the Angular v22
  zoneless default (no explicit provideZonelessChangeDetection needed)
- Drop zone.js from polyfills/angular.json across app, app-lob, app-crm
- Notify Angular after setInterval-driven updates (markForCheck) in the
  live samples (boston-marathon, finjs) so the grid refreshes when zoneless
- Keep provideAnimations() (required by Ignite UI's AnimationBuilder)
- Switch app-lob test bootstrap to a zone-free setup

Author: viktorkombov

angular.json

@@ -18,7 +18,6 @@
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": [
-              "zone.js",
               "hammerjs"
             ],
             "assets": [
@@ -220,7 +219,7 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "projects/app-lob/src/test.ts",
-            "polyfills": "projects/app-lob/src/polyfills.ts",
+            "polyfills": ["projects/app-lob/src/polyfills.ts"],
             "tsConfig": "projects/app-lob/tsconfig.spec.json",
             "karmaConfig": "projects/app-lob/karma.conf.js",
             "assets": [

projects/app-crm/src/main.server.ts

@@ -1,8 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

projects/app-crm/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
@@ -8,4 +8,4 @@ if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, AppConfig).catch((err) => console.error(err));

projects/app-crm/src/polyfills.ts

@@ -2,4 +2,3 @@
 //  * Zone JS is required by Angular itself.
 // //  */
 import 'hammerjs/hammer';
-import 'zone.js';  // Included with Angular CLI.

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts

@@ -174,6 +174,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (data.length !== 0) {
                 this.isLoading = false;
+                this.cdr.markForCheck();
             };
         });
     }
@@ -225,6 +226,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
                 ignoreCase: false,
                 strategy: DefaultSortingStrategy.instance()
             }];
+            this.cdr.markForCheck();
         }, 500);
     }
 
@@ -303,7 +305,10 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         const componentRef = viewContainerRef.createComponent(IgxGridComponent);
         const grid = (componentRef.instance as IgxGridComponent);
         grid.autoGenerate = true;
-        this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d);
+        this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => {
+            grid.data = d;
+            componentRef.changeDetectorRef.markForCheck();
+        });
         grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => {
             if (col.field === 'price') {
                 col.cellClasses = this.trends;

projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
 import { CellType, GridSelectionMode, IColumnExportingEventArgs, IGridKeydownEventArgs, IRowSelectionEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective } from 'igniteui-angular/grids/core';
 import { DefaultSortingStrategy, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
@@ -21,10 +21,11 @@ import { FormsModule } from '@angular/forms';
     imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxPdfTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
 export class GridFinJSComponent implements OnInit {
-    private el = inject(ElementRef);
-    private document = inject<Document>(DOCUMENT);
-    private pdfExportService = inject(IgxPdfExporterService);
-    dataService = inject(SignalRService);
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+    private pdfExportService = inject(IgxPdfExporterService);
+    private cdr = inject(ChangeDetectorRef);
+    dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
@@ -53,11 +54,12 @@ export class GridFinJSComponent implements OnInit {
         this.overlaySettings.outlet = this.outlet;
         this.data$ = this.dataService.data;
 
-        this.data$.subscribe((data) => {
-            if (data.length !== 0) {
-                this.isLoading = false;
-            };
-        });
+        this.data$.subscribe((data) => {
+            if (data.length !== 0) {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            };
+        });
 
         // Set initially grouped columns
         this.toggleGrouping();

projects/app-lob/src/app/grid-finjs/main.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, OnDestroy, ViewChild, ChangeDetectionStrategy, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
 import { IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular/core';
@@ -15,8 +15,10 @@ import { GridFinJSComponent } from './grid-finjs.component';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
 })
-export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
-    @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
+export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
+    private cdr = inject(ChangeDetectorRef);
+
+    @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
     @ViewChild('controllers', { static: true }) public controller: ControllerComponent;
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
     @ViewChild('chart1', { static: true }) public chart: IgxCategoryChartComponent;
@@ -173,10 +175,11 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
             this.setLabelIntervalAndAngle();
             this.chart.chartTitle = 'Data Chart with prices of ' + this.chartData[0].category + ' in ' +
                 this.chartData[0].region + ' Region';
-
-            this.dialog.open();
-        }, 200);
-    }
+
+            this.dialog.open();
+            this.cdr.markForCheck();
+        }, 200);
+    }
 
     public stopFeed(): void {
         if (this._timer) {

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { CellType, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core';
 import { AbsolutePosition, IgxOverlayService, IgxStringFilteringOperand, IgxSummaryResult, OverlayClosingEventArgs, OverlaySettings } from 'igniteui-angular/core';
@@ -24,6 +24,7 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts';
 export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
     overlayService = inject<IgxOverlayService>(IgxOverlayService);
     private document = inject<Document>(DOCUMENT);
+    private cdr = inject(ChangeDetectorRef);
 
 
     @ViewChild('grid1', { read: IgxGridComponent, static: true })
@@ -60,7 +61,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
     set live(val: boolean) {
         this._live = val;
         if (this._live) {
-            this._timer = setInterval(() => this.ticker(), 1500);
+            this.startTicker();
         } else {
             clearInterval(this._timer);
         }
@@ -85,9 +86,10 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
         this.localData = АthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress);
         this.localData.forEach(rec => this.getSpeed(rec));
         this.windowWidth = this.document.defaultView.innerWidth;
-        this._timer = setInterval(() => this.ticker(), 1500);
+        this.startTicker();
         this.overlayService.closing.subscribe((event: OverlayClosingEventArgs) => {
             this.showOverlay = false;
+            this.cdr.markForCheck();
         });
     }
 
@@ -230,6 +232,13 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
         this.manageRace();
     }
 
+    private startTicker(): void {
+        this._timer = setInterval(() => {
+            this.ticker();
+            this.cdr.markForCheck();
+        }, 1500);
+    }
+
     private getRandomNumber(min: number, max: number): number {
         return Math.round(min + Math.random() * (max - min));
     }

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid';
@@ -24,6 +24,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/direct
 
 export class TreeGridFinJSComponent implements OnDestroy, OnInit {
     private elRef = inject(ElementRef);
+    private cdr = inject(ChangeDetectorRef);
     dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent;
@@ -114,6 +115,7 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
         this.data$.subscribe((data) => {
             if (data.length !== 0) {
                 this.isLoading = false;
+                this.cdr.markForCheck();
             };
         });
     }

projects/app-lob/src/main.server.ts

@@ -1,8 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;