Skip to content

Commit 1f7cb81

Browse files
committed
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
1 parent e6a2615 commit 1f7cb81

17 files changed

Lines changed: 55 additions & 42 deletions

File tree

angular.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"index": "src/index.html",
1919
"tsConfig": "src/tsconfig.app.json",
2020
"polyfills": [
21-
"zone.js",
2221
"hammerjs"
2322
],
2423
"assets": [
@@ -220,7 +219,7 @@
220219
"builder": "@angular/build:karma",
221220
"options": {
222221
"main": "projects/app-lob/src/test.ts",
223-
"polyfills": "projects/app-lob/src/polyfills.ts",
222+
"polyfills": ["projects/app-lob/src/polyfills.ts"],
224223
"tsConfig": "projects/app-lob/tsconfig.spec.json",
225224
"karmaConfig": "projects/app-lob/karma.conf.js",
226225
"assets": [
Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { provideZoneChangeDetection } from "@angular/core";
21
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
32
import { AppComponent } from './app/app.component';
43
import { config } from './app/app.config.server';
54

6-
const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
5+
const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
76

87
export default bootstrap;

projects/app-crm/src/main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
1+
import { enableProdMode } from '@angular/core';
22
import { environment } from './environments/environment';
33
import { bootstrapApplication } from '@angular/platform-browser';
44
import { AppComponent } from './app/app.component';
@@ -8,4 +8,4 @@ if (environment.production) {
88
enableProdMode();
99
}
1010

11-
bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err));
11+
bootstrapApplication(AppComponent, AppConfig).catch((err) => console.error(err));

projects/app-crm/src/polyfills.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
// * Zone JS is required by Angular itself.
33
// // */
44
import 'hammerjs/hammer';
5-
import 'zone.js'; // Included with Angular CLI.

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
174174
this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
175175
if (data.length !== 0) {
176176
this.isLoading = false;
177+
this.cdr.markForCheck();
177178
};
178179
});
179180
}
@@ -225,6 +226,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
225226
ignoreCase: false,
226227
strategy: DefaultSortingStrategy.instance()
227228
}];
229+
this.cdr.markForCheck();
228230
}, 500);
229231
}
230232

@@ -303,7 +305,10 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
303305
const componentRef = viewContainerRef.createComponent(IgxGridComponent);
304306
const grid = (componentRef.instance as IgxGridComponent);
305307
grid.autoGenerate = true;
306-
this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d);
308+
this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => {
309+
grid.data = d;
310+
componentRef.changeDetectorRef.markForCheck();
311+
});
307312
grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => {
308313
if (col.field === 'price') {
309314
col.cellClasses = this.trends;

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
22
import { AsyncPipe, CurrencyPipe } from '@angular/common';
3-
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
3+
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
44
import { CellType, GridSelectionMode, IColumnExportingEventArgs, IGridKeydownEventArgs, IRowSelectionEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective } from 'igniteui-angular/grids/core';
55
import { DefaultSortingStrategy, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
66
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
@@ -21,10 +21,11 @@ import { FormsModule } from '@angular/forms';
2121
imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxPdfTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
2222
})
2323
export class GridFinJSComponent implements OnInit {
24-
private el = inject(ElementRef);
25-
private document = inject<Document>(DOCUMENT);
26-
private pdfExportService = inject(IgxPdfExporterService);
27-
dataService = inject(SignalRService);
24+
private el = inject(ElementRef);
25+
private document = inject<Document>(DOCUMENT);
26+
private pdfExportService = inject(IgxPdfExporterService);
27+
private cdr = inject(ChangeDetectorRef);
28+
dataService = inject(SignalRService);
2829

2930
@ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
3031
@ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
@@ -53,11 +54,12 @@ export class GridFinJSComponent implements OnInit {
5354
this.overlaySettings.outlet = this.outlet;
5455
this.data$ = this.dataService.data;
5556

56-
this.data$.subscribe((data) => {
57-
if (data.length !== 0) {
58-
this.isLoading = false;
59-
};
60-
});
57+
this.data$.subscribe((data) => {
58+
if (data.length !== 0) {
59+
this.isLoading = false;
60+
this.cdr.markForCheck();
61+
};
62+
});
6163

6264
// Set initially grouped columns
6365
this.toggleGrouping();

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild, ChangeDetectionStrategy } from '@angular/core';
1+
import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, OnDestroy, ViewChild, ChangeDetectionStrategy, inject } from '@angular/core';
22
import { Router } from '@angular/router';
33
import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
44
import { IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular/core';
@@ -15,8 +15,10 @@ import { GridFinJSComponent } from './grid-finjs.component';
1515
changeDetection: ChangeDetectionStrategy.Eager,
1616
imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
1717
})
18-
export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
19-
@ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
18+
export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
19+
private cdr = inject(ChangeDetectorRef);
20+
21+
@ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
2022
@ViewChild('controllers', { static: true }) public controller: ControllerComponent;
2123
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
2224
@ViewChild('chart1', { static: true }) public chart: IgxCategoryChartComponent;
@@ -173,10 +175,11 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
173175
this.setLabelIntervalAndAngle();
174176
this.chart.chartTitle = 'Data Chart with prices of ' + this.chartData[0].category + ' in ' +
175177
this.chartData[0].region + ' Region';
176-
177-
this.dialog.open();
178-
}, 200);
179-
}
178+
179+
this.dialog.open();
180+
this.cdr.markForCheck();
181+
}, 200);
182+
}
180183

181184
public stopFeed(): void {
182185
if (this._timer) {

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
1+
import { Component, HostListener, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, DOCUMENT, inject, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
22
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
33
import { CellType, IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand } from 'igniteui-angular/grids/core';
44
import { AbsolutePosition, IgxOverlayService, IgxStringFilteringOperand, IgxSummaryResult, OverlayClosingEventArgs, OverlaySettings } from 'igniteui-angular/core';
@@ -24,6 +24,7 @@ import { IgxSparklineCoreModule } from 'igniteui-angular-charts';
2424
export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
2525
overlayService = inject<IgxOverlayService>(IgxOverlayService);
2626
private document = inject<Document>(DOCUMENT);
27+
private cdr = inject(ChangeDetectorRef);
2728

2829

2930
@ViewChild('grid1', { read: IgxGridComponent, static: true })
@@ -60,7 +61,7 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
6061
set live(val: boolean) {
6162
this._live = val;
6263
if (this._live) {
63-
this._timer = setInterval(() => this.ticker(), 1500);
64+
this.startTicker();
6465
} else {
6566
clearInterval(this._timer);
6667
}
@@ -85,9 +86,10 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
8586
this.localData = АthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress);
8687
this.localData.forEach(rec => this.getSpeed(rec));
8788
this.windowWidth = this.document.defaultView.innerWidth;
88-
this._timer = setInterval(() => this.ticker(), 1500);
89+
this.startTicker();
8990
this.overlayService.closing.subscribe((event: OverlayClosingEventArgs) => {
9091
this.showOverlay = false;
92+
this.cdr.markForCheck();
9193
});
9294
}
9395

@@ -230,6 +232,13 @@ export class GridComponent implements OnInit, OnDestroy, AfterViewInit {
230232
this.manageRace();
231233
}
232234

235+
private startTicker(): void {
236+
this._timer = setInterval(() => {
237+
this.ticker();
238+
this.cdr.markForCheck();
239+
}, 1500);
240+
}
241+
233242
private getRandomNumber(min: number, max: number): number {
234243
return Math.round(min + Math.random() * (max - min));
235244
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core';
1+
import { ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, ViewChild, HostBinding, inject, ChangeDetectionStrategy } from '@angular/core';
22
import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, HorizontalAlignment, IGroupingExpression, IgxOverlayOutletDirective, OverlaySettings, PositionSettings, TreeGridFilteringStrategy, VerticalAlignment } from 'igniteui-angular/core';
33
import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
44
import { ITreeGridAggregation, IgxGroupedTreeGridSorting, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe } from 'igniteui-angular/grids/tree-grid';
@@ -24,6 +24,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/direct
2424

2525
export class TreeGridFinJSComponent implements OnDestroy, OnInit {
2626
private elRef = inject(ElementRef);
27+
private cdr = inject(ChangeDetectorRef);
2728
dataService = inject(SignalRService);
2829

2930
@ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent;
@@ -114,6 +115,7 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
114115
this.data$.subscribe((data) => {
115116
if (data.length !== 0) {
116117
this.isLoading = false;
118+
this.cdr.markForCheck();
117119
};
118120
});
119121
}
Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { provideZoneChangeDetection } from "@angular/core";
21
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
32
import { AppComponent } from './app/app.component';
43
import { config } from './app/app.config.server';
54

6-
const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
5+
const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
76

87
export default bootstrap;

0 commit comments

Comments
 (0)