Update to Angular 20

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/tests/src/server/ssr-ajax.spec.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-is-platform-server.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/ui/data-grid.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);
   });
 });

packages/devextreme-angular/tests/src/ui/list.spec.ts

@@ -81,7 +81,7 @@ describe('DxList', () => {
     testComponent.items.push(2);
     fixture.detectChanges();
 
-    expect(instance.option).toHaveBeenCalledWith('items', [1, 2]);
+    expect(optionSpy as jasmine.Spy).toHaveBeenCalledWith('items', [1, 2]);
     optionSpy.calls.reset();
   });
 

packages/devextreme-angular/tsconfig.lib.json

@@ -1,19 +1,44 @@
 {
-  "extends": "./node_modules/ng-packagr/lib/ts/conf/tsconfig.ngc.json",
+  "extends": "../../tsconfig.json",
   "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictTemplates": true,
     "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,
     "enableResourceInlining": true
   },
   "compilerOptions": {
+    "noUnusedLocals": false,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+    "moduleResolution": "node",
+    "outDir": "AUTOGENERATED",
+    "declaration": true,
+    "declarationDir": "AUTOGENERATED",
+    "declarationMap": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": false,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "strictNullChecks": false,
+    "verbatimModuleSyntax": false,
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "skipLibCheck": true,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "typeRoots": [
       "./node_modules/@types",
       "../../node_modules/@types"
     ]
   },
-  "files": []
+  "files": [],
+  "exclude": ["node_modules", "dist", "**/*.shim.ts", "**/*.spec.ts"]
 }

packages/nx-infra-plugin/src/executors/generate-components/angular-generator.ts

@@ -74,6 +74,14 @@ export async function generateAngularComponents(
   });
   logger.verbose('✓ Module facades generated');
 
+  logger.verbose('🔗 Generating common reexports...');
+  AngularCommonReexportsGenerator.generate({
+    outputPath: path.dirname(componentsDir),
+    metadata: metaData,
+    templatingOptions: config.templatingOptions,
+  });
+  logger.verbose('✓ Common reexports generated');
+
   logger.verbose('📋 Generating index facades...');
   const facadeGenerator = new AngularFacadeGenerator();
   facadeGenerator.generate({
@@ -83,15 +91,8 @@ export async function generateAngularComponents(
       },
     },
     commonImports: ['./common', './common/grids', './common/charts'],
+    commonReexports: metaData?.commonReexports,
     templatingOptions: config.templatingOptions,
   });
   logger.verbose('✓ Index facades generated');
-
-  logger.verbose('🔗 Generating common reexports...');
-  AngularCommonReexportsGenerator.generate({
-    outputPath: path.dirname(componentsDir),
-    metadata: metaData,
-    templatingOptions: config.templatingOptions,
-  });
-  logger.verbose('✓ Common reexports generated');
 }