refactor(*): migrate to zoneless change detection

angular.json

@@ -18,7 +18,6 @@
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": [
-              "zone.js",
               "hammerjs"
             ],
             "assets": [
@@ -137,7 +136,7 @@
             },
             "index": "projects/app-lob/src/index.html",
             "polyfills": [
-              "projects/app-lob/src/polyfills.ts"
+              "hammerjs/hammer"
             ],
             "tsConfig": "projects/app-lob/tsconfig.app.json",
             "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": [
@@ -268,7 +267,7 @@
             },
             "index": "projects/app-crm/src/index.html",
             "polyfills": [
-              "projects/app-crm/src/polyfills.ts"
+              "hammerjs/hammer"
             ],
             "tsConfig": "projects/app-crm/tsconfig.app.json",
             "assets": [

live-editing/configs/PivotGridConfigGenerator.ts

@@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
             component: 'PivotGridLayoutComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            appConfig: BaseAppConfig,
+            component: 'PivotStylingComponent'
+        }));
+
         return configs;
     }
 }

package.json

@@ -73,13 +73,13 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^22.0.0",
+    "igniteui-angular": "22.1.0-alpha.0",
     "igniteui-angular-charts": "^22.0.0",
     "igniteui-angular-core": "^22.0.0",
-    "igniteui-angular-extras": "^22.0.0",
-    "igniteui-angular-i18n": "^22.0.0",
+    "igniteui-angular-extras": "22.1.0-alpha.0",
+    "igniteui-angular-i18n": "22.1.0-alpha.0",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-grid-lite": "^0.7.1",
+    "igniteui-grid-lite": "^0.9.0",
     "igniteui-i18n-resources": "^1.0.4",
     "igniteui-live-editing": "^3.5.1",
     "igniteui-webcomponents": "^7.2.1",
@@ -91,8 +91,7 @@
     "shiki": "^3.13.0",
     "sql-formatter": "^15.4.11",
     "tailwindcss": "^4.1.10",
-    "tslib": "^2.6.1",
-    "zone.js": "~0.15.0"
+    "tslib": "^2.6.1"
   },
   "overrides": {
     "@ng-bootstrap/ng-bootstrap": {
@@ -113,7 +112,7 @@
       "@angular/compiler": "^22.0.0"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "^22.0.0",
+      "igniteui-angular": "22.1.0-alpha.0",
       "@infragistics/igniteui-angular": "^22.0.0",
       "igniteui-angular-core": "^22.0.0",
       "igniteui-angular-charts": "^22.0.0",

projects/app-crm/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, DOCUMENT, inject } from '@angular/core';
 import { SEOService } from '../../../app-lob/src/app/seo.service';
 import { RouterOutlet } from '@angular/router';
 
@@ -7,7 +7,6 @@ import { RouterOutlet } from '@angular/router';
     selector: 'app-root',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {

projects/app-crm/src/app/grid-crm/grid-crm.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
 import { CellType, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxNumberSummaryOperand, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core';
@@ -75,7 +75,6 @@ class SoonSummary extends IgxDateSummaryOperand {
     selector: 'app-grid',
     styleUrls: ['./grid-crm.component.scss'],
     templateUrl: './grid-crm.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
 })
 export class GridCRMComponent implements OnInit, AfterViewInit {

projects/app-crm/src/environments/environment.ts

@@ -5,12 +5,3 @@
 export const environment = {
   production: false
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

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

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

projects/app-crm/src/test.ts

@@ -1,15 +1,14 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
-}
-);
+}
+);