Update to Angular 20 (#32401)

Author: GoodDayForSurf

packages/devextreme-angular/package.json

@@ -20,9 +20,9 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/forms": ">=20.0.0",
     "devextreme": "workspace:*"
   },
   "devDependencies": {
@@ -40,8 +40,8 @@
     "@eslint/eslintrc": "catalog:",
     "@eslint-stylistic/metadata": "catalog:",
     "@stylistic/eslint-plugin": "catalog:",
-    "@types/jasmine": "2.8.24",
-    "@types/node": "20.11.17",
+    "@types/jasmine": "~6.0.0",
+    "@types/node": "~20.19.0",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "@webcomponents/custom-elements": "1.6.0",
@@ -65,7 +65,7 @@
     "reflect-metadata": "0.1.13",
     "stream-browserify": "3.0.0",
     "style-loader": "3.3.4",
-    "tslib": "2.6.3",
+    "tslib": "2.8.1",
     "typescript": "catalog:angular",
     "webpack": "5.105.4",
     "yargs": "17.7.2",

packages/devextreme-angular/src/common/data/custom-store/index.ts

@@ -1,4 +1,4 @@
-export {
+export type {
     GroupItem,
     isGroupItemsArray,
     isItemsArray,

packages/devextreme-angular/src/core/integration.ts

@@ -12,9 +12,15 @@ import eventsEngine from 'devextreme/common/core/events/core/events_engine';
 const outsideZoneEvents = ['mousemove', 'mouseover', 'mouseout'];
 const insideZoneEvents = ['mouseup', 'click', 'mousedown', 'transitionend', 'wheel'];
 
-let originalAdd;
-let callbacks = [];
-let readyCallbackAdd = function (callback) {
+type ReadyCallback = () => void;
+type ReadyCallbackAdd = (callback: ReadyCallback) => void;
+interface ReadyCallbackAddContext {
+  callBase: ReadyCallbackAdd;
+}
+
+let originalAdd: ReadyCallbackAdd;
+let callbacks: ReadyCallback[] = [];
+let readyCallbackAdd = function (this: ReadyCallbackAddContext, callback: ReadyCallback) {
   if (!originalAdd) {
     originalAdd = this.callBase.bind(this);
   }
@@ -36,7 +42,7 @@ let doInjections = (document: any, ngZone: NgZone, xhrFactory: XhrFactory) => {
   domAdapter.inject({
     _document: document,
 
-    listen(...args) {
+    listen(this: { callBase: (...args: any[]) => any }, ...args) {
       const eventName = args[1];
       if (outsideZoneEvents.includes(eventName)) {
         return ngZone.runOutsideAngular(() => this.callBase.apply(this, args));

packages/devextreme-angular/src/core/iterable-differ-helper.ts

@@ -34,7 +34,7 @@ export class IterableDifferHelper {
     if (value && Array.isArray(value)) {
       if (!this._propertyDiffers[prop]) {
         try {
-          this._propertyDiffers[prop] = this._differs.find(value).create(null);
+          this._propertyDiffers[prop] = this._differs.find(value).create(undefined);
           return true;
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (e) { }

packages/devextreme-angular/src/core/nested-option.ts

@@ -220,14 +220,17 @@ export interface IOptionWithTemplate extends BaseNestedOption {
   template: any;
 }
 
-const triggerShownEvent = function (element) {
-  const changeHandlers = [];
+const triggerShownEvent = function (element: Element) {
+  const changeHandlers: Element[] = [];
 
   if (!render(element).hasClass(VISIBILITY_CHANGE_SELECTOR)) {
     changeHandlers.push(element);
   }
 
-  changeHandlers.push.apply(changeHandlers, element.querySelectorAll(`.${VISIBILITY_CHANGE_SELECTOR}`));
+  const nestedHandlers = Array.prototype.slice.call(
+    element.querySelectorAll(`.${VISIBILITY_CHANGE_SELECTOR}`),
+  ) as Element[];
+  changeHandlers.push(...nestedHandlers);
 
   for (let i = 0; i < changeHandlers.length; i++) {
     triggerHandler(changeHandlers[i], 'dxshown');

packages/devextreme-angular/src/core/watcher-helper.ts

@@ -59,7 +59,7 @@ export class WatcherHelper {
     return value;
   }
 
-  private _checkObjectsFields(checkingFromObject: object, checkingToObject: object) {
+  private _checkObjectsFields(checkingFromObject: Record<string, any>, checkingToObject: Record<string, any>) {
     for (const field in checkingFromObject) {
       const oldValue = this._toComparable(checkingFromObject[field]);
       const newValue = this._toComparable(checkingToObject[field]);
@@ -72,6 +72,7 @@ export class WatcherHelper {
         return true;
       }
     }
+    return false;
   }
 
   checkWatchers() {

packages/devextreme-angular/src/index.ts

@@ -62,10 +62,10 @@ describe('Universal', () => {
   });
   // spec
   it('should set state and remove data from the state when the request is repeated', () => {
-    const platformId = TestBed.get(PLATFORM_ID);
+    const platformId = TestBed.inject(PLATFORM_ID);
     if (isPlatformServer(platformId)) {
       sendRequest.apply(mockSendRequest, [{ url: 'someurl' }]);
-      const transferState: TransferState = TestBed.get(TransferState);
+      const transferState: TransferState = TestBed.inject(TransferState);
       const key = makeStateKey('0urlsomeurl');
 
       expect(transferState.hasKey(key)).toBe(true);
@@ -74,11 +74,11 @@ describe('Universal', () => {
   });
 
   it('should generate complex key', () => {
-    const platformId = TestBed.get(PLATFORM_ID);
+    const platformId = TestBed.inject(PLATFORM_ID);
     if (isPlatformServer(platformId)) {
       sendRequest.apply(mockSendRequest, [{ url: 'someurl', data: { filter: { name: 'test' }, select: ['name'] } }]);
       const key = makeStateKey('0urlsomeurldatafilternametestselect0name');
-      const transferState: TransferState = TestBed.get(TransferState);
+      const transferState: TransferState = TestBed.inject(TransferState);
 
       expect(transferState.hasKey(key)).toBe(true);
     }

packages/devextreme-angular/tests/src/server/ssr-ajax.spec.ts

@@ -50,12 +50,12 @@ describe('Universal', () => {
         template: '<dx-data-grid></dx-data-grid>',
       },
     });
-    const platformID = TestBed.get(PLATFORM_ID);
+    const platformID = TestBed.inject(PLATFORM_ID);
     if (isPlatformServer(platformID)) {
       const fixture = TestBed.createComponent(TestContainerComponent);
       fixture.detectChanges();
 
-      const transferState: TransferState = TestBed.get(TransferState);
+      const transferState: TransferState = TestBed.inject(TransferState);
 
       expect(transferState.hasKey(getServerStateKey())).toBe(true);
       expect(transferState.get(getServerStateKey(), null as any)).toEqual(true);
@@ -70,7 +70,7 @@ describe('Universal', () => {
     });
 
     const fixture = TestBed.createComponent(TestContainerComponent);
-    const transferState: TransferState = TestBed.get(TransferState);
+    const transferState: TransferState = TestBed.inject(TransferState);
 
     transferState.set(getServerStateKey(), true as any);
 

packages/devextreme-angular/tests/src/server/ssr-is-platform-server.spec.ts

@@ -591,7 +591,7 @@ describe('DxDataGrid slow tests', () => {
 
     fixture.detectChanges();
 
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 500; i++) {
       document.body.click();
       fixture.detectChanges();
     }
@@ -600,7 +600,7 @@ describe('DxDataGrid slow tests', () => {
 
     const memoryBefore = await (performance as any).measureUserAgentSpecificMemory();
 
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 500; i++) {
       document.body.click();
       fixture.detectChanges();
     }
@@ -610,6 +610,6 @@ describe('DxDataGrid slow tests', () => {
     const memoryAfter = await (performance as any).measureUserAgentSpecificMemory();
     const memoryDiff = Math.round((memoryAfter.bytes - memoryBefore.bytes) / 1024);
 
-    expect(memoryDiff).toBeLessThan(40);
+    expect(memoryDiff).toBeLessThan(100);
   });
 });